Как сделать параллакс эффект на сайте

Что такое параллакс

Параллакс в web-разработке — это, говоря простым языком, когда элементы переднего плана двигаются быстрее чем фоновое изображение (бэкграунд). Сейчас эта технология набирает популярность все больше, т.к. смотрится это очень круто.

Как сделать параллакс эффект на сайте

В данной статье я расскажу как сделать простой параллакс эффект  при скроллинге на своем сайте. В общем осуществлять я буду это при помощи плагина Simple Parallax Scrolling.

Что бы воспользоваться данным плагином, нужно зайти на их официальном сайте и скачать сам файл parallax.js. Когда вы зайдете на сайт, вы увидите сразу параллакс эффект при скроллинге. После того как вы его скачали, вам нужно подключить файл parallax.min.js или  parallax.js, обязательно после подключения библиотеки jQuery.

Использовать его можно как через JavaScript так и через HTML5 атрибут data

Например:
C помощью HTML5 атрибут

Создаем блок, с классом parallax-window. Далее нам необходимо указать атрибут  data-parallax=»scroll» и еще один атрибут data-image-src=»/path/to/image.jpg» , где мы указываем путь к изображению к которому необходимо применить данный эффект.

C помощью JavaScript

Берем нужный элемент, с классом parallax-window мы вызываем метод parallax и параметром передаем ему путь к картинке imageSrc: ‘/path/to/image.jpg’ 

Также на официальном сайте найдете все опции которые вы сможете использовать .

Обязательно укажите в стилях высоту блока с параллакс эффектом
Пример:

 

ДЕМО

Если данная статья вам понравилась или помогла, оставляйте свои комментарии и я сделаю еще что-то интересное при помощи параллакса.
А также чтобы не пропустить выхода новых статей и новостей подписывайтесь на наш telegram-канал и соц.сети

Оставьте ответ

comment-avatar

*