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