0

представим что у меня на сайте есть картинка 500x500.Как мне сделать чтобы она вывелась частями, т.е чтобы первые 2сек. вывелась лишь одна часть картинки, потом еще через 2 секунды вывелась другая часть. И так должна выводиться вся картинка. Как это реализовать на js? Извиняюсь за возможные ошибки.

1 ответ 1

1

Это можно реализовать на css с помощью анимации прозрачности. Суть в том, что сначала Вы скрываете картинку под слоем абсолютно спозиционированных элементов (их количество и размеры могут быть любыми), а потом постепенно каждый элемент делаете прозрачным, и под ним проявится часть картинки:

.pic-wrap {
  width: 500px;
  height: 500px;
  position: relative;
}
img {
  width: 500px;
  height: 500px;
}
.top,
.top:before,
.top:after,
.bottom,
.bottom:before,
.bottom:after {
  position: absolute;
  background-color: white;
  width: 166.6px;
  height: 250px;
  animation: opacity 2s linear forwards;
}
.top {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation-delay: 4s;
}
.top:before {
  content: '';
  top: 0;
  left: -100%;
  animation-delay: 2s;
}
.top:after {
  content: '';
  top: 0;
  right: -100%;
}
.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation-delay: 10s;
}
.bottom:before {
  content: '';
  bottom: 0;
  left: -100%;
  animation-delay: 8s;
}
.bottom:after {
  content: '';
  bottom: 0;
  right: -100%;
  animation-delay: 6s;
}
@keyframes opacity {
  50% {opacity: 1;}
  100% {opacity: 0;}
}
<div class="pic-wrap">
  <div class="top"></div>
  <img src="https://cdn.pixabay.com/photo/2016/01/01/07/56/san-francisco-1116316_1280.jpg" alt="">
  <div class="bottom"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.