Слайдер с liquid-эффектом при перелистывании изображений

Весьма интересная наработка появилась на сайте codrops: они паказали широкоформатный слайдер с пятью разными эффектами картинок «под водой».

Что необычного и кому это может быть интересно

А необычного действительно тут достаточно. Очень редко в Сети можно встретить качественную анимацию с оригинальными свойствами. Отметим так же, что производительность находится на высоком уровне. В основу разработки легли компоненты PixiJS для рендеринга и GSAP для создания анимации.

Такое креативное изобретение можно применять на сайтах с тематикой:

• доставка воды;
• продажа бассейнов;
• продажа очистных сооружений и оборудования;
• деятельность, связанная с добычей или доставкой морепродуктов.

Технические моменты

Коротко опишем необходимые детали для работы слайдера. Рекомендуем Вам скачать исходники в архиве (ссылка выше) и поэкспериментировать с кодом. HTML разметка:

<div class="slide-wrapper">
	<div class="slide-item">
		<h3 class="slide-item__title">Slide 1</h3>
		<img src="..." class="slide-item__image">
	</div>
	<div class="slide-item">
		<h3 class="slide-item__title">Slide 2</h3>
		<img src="..." class="slide-item__image">
	</div>
	<div class="slide-item">
		<h3 class="slide-item__title">Slide 3</h3>
		<img src="..." class="slide-item__image">
	</div>								
</div>

<a href="#" class="scene-nav scene-nav--prev" data-nav="previous">PREV</a>
<a href="#" class="scene-nav scene-nav--next" data-nav="next">NEXT</a>

Стандартная обертка для слайдера: слайд, текст, картинка. И кнопки навигации.

В CSS мы прячем наши обертки и установки навигационных кнопок слева и справа от слайда:

.slide-wrapper {
  display: none;
}

.scene-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: inline-block;
}

.scene-nav--next {
  right: 2%;
}

.scene-nav--prev {
  left: 2%;
}

Разумеется, основную задачу берет на себя JavaScript и те компоненты, что мы описали выше. Для корректной работы рекомендуется подключить все скрипты из HTML-файла выбранной Вами демо-версии.

Всего предоставляется 5 разных вариантов. Каждый из них разбит на свой HTML-файл, который содержит разметку и наименования классов. Работу слайдера обеспечивает подключаемый js-файл из папки /js/.

Предположительно, внедрить подобный слайдер в живой проект будет не просто, но реально. При создании же сайта с нуля (например, Вы делаете свой шаблон HTML5), использовать данную наработку будет элементарно. Удачи.