Я люблю рассказывать о параллаксе. Наверное это одно из моих любимых направлений, и судя по статистике и наших читателей, сегодня мы бы хотели показать как реализовать еще один замечательный тип параллакса для сайта при помощи jQuery и GSAP. Нечто похожее мы уже показывали ранее, но там сами блоки были с эффектом параллакса, сегодня я покажу как сделать на таких блоках цветные полосы с эффектом параллакса при прокрутке страницы. Выглядит очень интересно и свежо, думаю вам стоит попробовать на своих сайтах.

 

Нам понадобиться небольшой плагин, а именно parallax Color Bars jQuery который позволяет создавать интерактивные параллаксные бары на определенных элементах, которые перемещаются вверх / вниз с разной скоростью при прокрутке веб-страницы. Смотрите также бесплатные и не только шаблоны от наших партнеров:

Шаг 1. HTML

Для начала нам необходимо подключить скрипты к странице, подключайте их в такой очередности как это сделали мы, и смотрите, чтобы у вас не было конфликтов с уже установленными скриптами:

Теперь добавьте на свою страницу цветные полосы parallaxа и настройте эффект прокрутки parallaxа, применив параметры к атрибутам данных:

Шаг 2. JS

Так как у нас всю основную работу выполняют плагины jQuery, нам необходимо инифилизировать плагин к странице, проще говоря, чтобы дать понять плагину где работать.

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

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

Вот и все. Готово!