Немаловажным плюсом данного скрипта является также то, что такую анимацию можно применять не только к информационным блокам, но и использовать для галерей и отдельных фотографий.
Установка:
Добавляем на сайт скрипт simpleParallax или simpleParallax.min
- Скачать: simpleParallax.js
- Скачать: simpleParallax.min.js
И подключаем к изображению с классом parallax
var image = document.getElementsByClassName('parallax');
new simpleParallax(image);
Настройки:
Несмотря на минимум настроек, их вполне достаточно, чтобы придать изображениям красивые эффекты.
| Название | Тип | По умолчанию | Варианты |
|---|---|---|---|
| orientation | string | up | top - right - bottom - left |
| scale | int | 1.2 | Должно быть больше 1 - без эффекта, если для параметра overflow установлено значение true |
| overflow | boolean | false | false - true |
| delay | int | 0 | Задержка в секундах |
| transition | string | 'cubic-bezier(0,0,0,1)' | CSS свойство transition |
| breakpoint | int | 768 | Контрольная точка в пикселях |
orientation
Направление эффекта параллакса.
scale
Чем выше настройка масштаба, тем заметнее будет эффект параллакса. В свою очередь, изображение может терять в качестве.
overflow
Если настройка включена, изображение не будет обрезаться, а будет перемещаться полностью. См. последний пример.
delay
Когда установлена задержка, перевод изображения будет продолжаться, когда пользователь прекратит прокрутку. Это дает очень хороший эффект.
transition
Эффект перехода работает в тесной связи с настройкой задержки. Он добавит эффект CSS к настройке задержки.
breakpoint
Контрольная точка в пикселях, из которой будет инициализирован simpleParallax
Примеры:
var image = document.getElementsByClassName('paralax');
new simpleParallax(image, {
delay: 0.1,
orientation: 'down',
scale: 1.50
});
var image = document.getElementsByClassName('paralax');
new simpleParallax(image, {
delay: 1,
orientation: 'right',
scale: 1.50
transition: 'linear'
});
var image = document.getElementsByClassName('paralax');
new simpleParallax(image, {
delay: 0.5,
orientation: 'left',
scale: 2
transition: 'ease-in'
});
var image = document.getElementsByClassName('paralax');
new simpleParallax(image, {
delay: 0.5,
orientation: 'left',
scale: 1.80,
overflow: true
});
Страничка автора: simpleparallax.com
Добавить комментарий: