Создадим динамичный блок с «листающимися» картинками.
Вёрстка
Изображения могут любых пропорций, не обязательно квадратные, они будут вписываться в квадрат и центрироваться.
<div class="puzzle-gallery">
<div class="item horizontal">
<img class="firstItem" src="/image-1.img">
</div>
<div class="item horizontal">
<img class="firstItem" src="/image-2.img">
<img class="secondItem" src="/image-3.img">
</div>
<div class="item horizontal">
<img class="secondItem" src="/image-4.img">
</div>
<div class="item vertical">
<img class="firstItem" src="/image-5.img">
</div>
<div class="item horizontal">
<img class="firstItem" src="/image-6.img">
<img class="secondItem" src="/image-7.img">
</div>
<div class="item vertical">
<img class="secondItem" src="/image-8.img">
</div>
<div class="item horizontal">
<img class="firstItem" src="/image-9.img">
<img class="secondItem" src="/image-10.img">
</div>
<div class="item vertical">
<img class="secondItem" src="/image-11.img">
</div>
</div>
Стили
Главный эффект движения задаётся с помощью CCS анимаций.
.puzzle-gallery {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}
.puzzle-gallery > * {
width: calc(25% - 0.9375rem);
max-height: 25rem;
background-color: var(--color-2);
position: relative;
padding-bottom: 23%;
overflow: hidden;
}
.puzzle-2 .puzzle-gallery > * {
background-color: var(--color-3);
}
.puzzle-gallery .item img {
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.puzzle-gallery .horizontal .firstItem {
animation: imageChangeX 8s infinite linear;
}
.puzzle-gallery .horizontal .secondItem {
animation: imageChangeXSecond 8s infinite linear;
left: -100%;
right: 0;
}
.puzzle-gallery .vertical .firstItem {
animation: imageChangeY 8s infinite linear;
}
.horizontal {
position: relative;
padding-bottom: 23%;
overflow: hidden;
}
.horizontal img.secondItem {
animation: imageChangeXSecond 8s infinite linear;
left: -100%;
right: 0;
}
.vertical img.secondItem {
animation: imageChangeYSecond 8s infinite linear;
top: -100%;
bottom: 0;
}
@keyframes imageChangeYSecond {
0% {
top: 100%;
bottom: -100%;
}
25% {
top: 0;
bottom: 0;
}
50%{
top: 0;
bottom: 0;
}
75%{
top: 100%;
bottom: -100%;
}
100% {
top: 100%;
bottom: -100%;
}
}
@keyframes imageChangeY {
0% {
}
25% {
top: -100%;
bottom: 100%;
}
50%{
top: -100%;
bottom: 100%;
}
75%{
top: 0;
bottom: 0;
}
100% {
top: 0;
bottom: 0;
}
}
@keyframes imageChangeXSecond {
0% {
left: 100%;
right: -100%;
}
25% {
left: 0;
right: 0;
}
50%{
left: 0;
right: 0;
}
75%{
left: 100%;
right: -100%;
}
100% {
left: 100%;
right: -100%;
}
}
@keyframes imageChangeX {
0% {
}
25% {
left: -100%;
right: 100%;
}
50%{
left: -100%;
right: 100%;
}
75%{
left: 0;
right: 0;
}
100% {
left: 0;
right: 0;
}
}
Назначение направления движений
Можно либо сразу прописать в верстке, как в примере выше, либо задать с помощью jQuery.
jQuery(document).ready(function($){
$('.puzzle-1 .item').eq(0).addClass('horizontal');
$('.puzzle-1 .item').eq(1).addClass('horizontal');
$('.puzzle-1 .item').eq(3).addClass('vertical');
$('.puzzle-1 .item').eq(2).addClass('horizontal');
$('.puzzle-1 .item').eq(4).addClass('horizontal');
$('.puzzle-1 .item').eq(5).addClass('vertical');
$('.puzzle-1 .item').eq(6).addClass('horizontal');
$('.puzzle-1 .item').eq(7).addClass('vertical');
});
[site-socialshare]