Эффект параллакса часто применяется в современном дизайне как элемент динамичности скроллинга страницы. Это выглядит очень красиво и впечатляющи. Эффект параллакса в основном достигается с помощью 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>