Горизонтальный и вертикальный параллакс эффект на jQuery

jQuery & JavaScript WordSmall

Эффект параллакса часто применяется в современном дизайне как элемент динамичности скроллинга страницы. Это выглядит очень красиво и впечатляющи. Эффект параллакса в основном достигается с помощью JavaScript и библиотеке jQuery. Но также может быть сделан только с использованием одной каскадной таблицы CSS3, учитывая все ее новшества. Об этом мы поговорим в другой раз, а в этом обзоре рассмотрим jQuery плагин Paroller.js.

Paroller – способен создать эффект параллакса в вертикальном или горизонтальном направлении с определенной скоростью. Его можно применять не только к фоновым изображениям, но и так же к любым элементам, как это видно в демо-просмотре.

Демо Скачать

Параметры плагина

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

data-* По умолчанию Описание
data-paroller-factor 0 Скорость движения эффекта параллакса. Параметр от 0,3 до -0,3.
data-paroller-type background На переднем или заднем плане элемента: background, foreground.
data-paroller-direction vertical Направление эффекта: vertical, horizontal.

Подключение

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.paroller.js"></script>

Запуск плагина

<script>
   $(function () {
      $(window).paroller();
   });
</script>

Запуск с параметрами:

<script>
   $(function () {
      $(window).paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });
   });
</script>

Пример прописывания атрибутов

<div data-paroller-factor="-0.1"
     data-paroller-type="foreground"
     data-paroller-direction="horizontal"
></div>
Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code