Параллакс эффект simpleParallax

simpleParallax — это простой и легкий JavaScript без каких-либо дополнительных библиотек. Он применяет эффект параллакса непосредственно к тегам изображения, а не к фону.

Немаловажным плюсом данного скрипта является также то, что такую анимацию можно применять не только к информационным блокам, но и использовать для галерей и отдельных фотографий.

Установка:

Добавляем на сайт скрипт simpleParallax

И подключаем к изображению с классом 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

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!