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

 

плавной прокрутки параллакса к любым элементам при прокрутке вниз или вверх по странице. При этом использует плавную анимацию, что заставляет элементы «парить» на странице.  Давайте посмотрим как у нас это получилось.

Мы подключили следующие скрипты:

  • jQuery
  • TweenLite.js
  • CSSPlugin.js

Шаг 1. HTML

Для начала включите скомпилированные файлы JavaScript на веб-странице:

Далее нам необходимо инициализировать плагин и привязать его для нашего контента:

Шаг 2. JS

Инициализируем плагин:

Затем настраиваем эффект прокрутки parallax в атрибуте data-parallax-content:

Или можете это сделать в JavaScript:

Такой слайдер станет отличным элементом на сайте, мы сами планируем использовать его в дальнейшем, что и вам советуем.

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