@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);
}
  • Вопрос задан
  • 205 просмотров
Пригласить эксперта
Ответы на вопрос 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Берем плагин типа такого или со схожим функционалом и привязываем свою анимацию (увеличение логотипа) к прогрессу загрузки страницы.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы