/ Дизайн / Блоки с изменяющимися картинками

Блоки с изменяющимися картинками

30.10.2024

334

Создадим динамичный блок с «листающимися» картинками.

Вёрстка

Изображения могут любых пропорций, не обязательно квадратные, они будут вписываться в квадрат и центрироваться.

<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]
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Блоки с изменяющимися картинками
Рассылки (автоматические и не только)
Рекомендации для васРассылки (автоматические и не только)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.