liquid эффект

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

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

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

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

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

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

демонстрация слайда

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

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

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

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

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

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

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

167 просмотров
В поисках шаблона для сайта?