@oLd__bOY
Обычный верстальщик

Как синхронизировать анимацию увеличения логотипа со скоростью загрузки странички пользователя?

вот код
<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="css\style.css">
	</head>
	<body>
		<div id="page-preloader" class="preloader">
			<div class="loader">
				<img src="img\VP\logo easy2.png" alt="">
			</div>
		</div>

		<section class="intro">
			<video autoplay width="300" src="Untitled.mp4" class="intro__play"></video>
		</section>


		<script
		  src="https://code.jquery.com/jquery-3.4.1.min.js"
		  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
		  crossorigin="anonymous">
		</script>
		<script src="js\script.js"></script>
	</body>
</html>

.intro__play {
  margin-left: 50%;
  margin-top: 30%;
  transform: translate(-50%, -30%);
}
.preloader {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 3;
  transition: 1s all;
  opacity: 1;
  visibility: visible;
}
.loader img{
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  -webkit-animation: 5s load 1;
}
.done {
  opacity: 0;
  visibility: hidden;
}
@-webkit-keyframes load {
  0%{height: 0px;}
  100%{height: 320px;}
}

document.body.onload = function() {
	setTimeout(function() {
		var preloader = document.getElementById('page-preloader');
		if( !preloader.classList.contains('done') )
		{
			preloader.classList.add('done');
		}
	}, 1000);
}
  • Вопрос задан
  • 201 просмотр
Пригласить эксперта
Ответы на вопрос 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Берем плагин типа такого или со схожим функционалом и привязываем свою анимацию (увеличение логотипа) к прогрессу загрузки страницы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
от 60 000 до 90 000 руб.
Sellfashion Нижний Новгород
от 100 000 до 150 000 руб.