Как сделать параллакс эффект js
Обновлено: 07.07.2024
Элементам, которые мы хотим замедлить или ускорить при прокрутке, добавляем класс rellax и data-атрибут data-rellax-speed="-10" - чем меньше значение, тем элемент прокручивается медленней, чем значение больше, тем быстрее прокручивается элемент
Этого достаточно, чтобы параллакс эффект уже заработал
Для сортировки элементов по оси Z можно использовать data-rellax-zindex="5" - чем выше значение, тем визуально ближе расположен элемент
Рассмотрим полноценный пример
Чтобы статья была интересней и полезней, для создания различных фигур, которые будут элементами параллакс эффекта, будем использовать CSS-переменные
Для начала опишем стили - для фигуры задаем переменные и используем их для соответствущих свойств, а также зададим переменную для секции, которую будем использовать для назначения фона
Чуть подробнее про CSS-переменные в статье CSS-переменные: как сделать темную тему
Теперь для кастомизации фигур будем задавать разные значения переменных в инлайн стилях (если какой-либо переменной не задано значение, берётся значение по-умолчанию из CSS стилей)
Для секций также задаем фон меняя значение переменной
Архив с примером можно скачать по ссылке
Плагин очень прост в использовании, поэтому не должно возникнуть каких-то трудностей
В дополнение к параллакс эффекту рассмотрели полезное применение CSS-переменных
Публикуем реализацию очень простого Parallax эффекта при прокрутке страницы. Данный parallax эффект не только очень прост в установке и настройке, но и сам по себе скрипт параллакса небольшой и не нуждается в дополнительных настройках. Работает данный скрипт при подключенной библиотеки jQuery.
подключается рarallax эффект проще простого и работает при подключенной библиотеке jQuery.
В архиве версия jQuery — jquery-1.11.3.min.js Но данный эффект параллакса работает как с более новыми версиями библиотеки jQuery, так и с более старыми. Проверял!
Поэтому подключаем к HTML документу сначала jQuery , а после сам скрипт parallax.min.js
Выглядит подключение вот так:
Ну а теперь HTML CSS подключение параллакса
Берите блок, это может быть header , section , div , footer .
Блок div , в частности, называйте любым классом, и присваивайте:
width: 100%
min-height: 400px;
Хотя это не принципиально.
Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте.
Библиотеку stellar.js качаем здесь, подробную документацию по stellar.js читаем здесь.
Далее подключаем stellar.js для всего документа
Parallax для элементов
Задаем скорость прокрутки для элементов
Задаем соотношение относительно стандартной скорости прокрутки.
Ratio 0.5 приведет к тому, что элемент будет прокручиваться с половинной скорость,
ratio 1 не будет иметь никакого эффекта,
ratio 2 приведет к тому, что элемент будет прокручиваться с удвоенной скоростью.
Если коэффициент меньше 1 вызывает ошибки в отображении элементов на странице, попробуйте задать для этого элемента position: fixed; .
Parallax для фона
Если необходимо, чтобы фоновое изображение прокручивалось вслед за прокруткой страницы, тогда нужно добавить следующий атрибут:
Как и в случае с параллаксом элементов, ratio – это соотношение к стандартной прокрутке.
Для коэффициента меньше 1, чтобы избежать ошибок в отображении фона, лучше установить для background-attachment значение fixed .
На мобильных телефонах параллакс для фона лучше не использовать.
Кстати background-attachment: fixed на мобильных так же может не сработать из-за сложности вычислений, поэтому нужно для мобильных ( @media (max-width: 768px) ) задать background-attachment: scroll .
Еще одно уточнение, что фоновая картинка должна быть больше по размеру, чем высота блока, в котором она используется.
Чтобы параллакс не срабатывал на мобильных устройствах ( @media (max-width: 768px) ), можно задать для блока свойство background-position: center center !important; .
Когда я тестировал горизонтальный параллакс и Offsets, то у меня возникло много вопросов, но я их отложил на потом и этот плагин использовал только для вертикального параллакса.
Может быть проблемы с IE из-за background-attachment: fixed; – фон может двигаться рывками при скролле.
Нужно использовать отдельные условия для IE:
Библиотека Parallax это уникальная и очень удобная вещь. Это одна из библиотек для декоративного преображения веб-страницы. Что такое параллакс эффект говорить не стану. Данная библиотека привязывает движение слоёв к положению курсора. Библиотека доступна по ссылке: parallax.
С дистрибутивом у меня возникали проблемы уже не раз. Всем у кого встречается данная проблема около const rqAnFr = require('raf') рекомендую скачать скомпилированную версию parallax compiled. Как всегда вставляем ссылку на библиотеку:
Сама конструкция в вёрстке не представляет чего-то сложного, обратите внимание на названия классов и атрибута data-depth . Чем больше число, тем быстрее движется слой.
Активация библиотеки происходит следующим образом:
Перейдём к составленному мной примеру:
Я специально не стал вставлять код в CSS файл, чтобы было легче понять как всё работает. Совершенно не важно, какое содержимое у слоя. Можно манипулировать позиционированием и эффектами, насколько хватит фантазии. Библиотека поддерживает настройку через атрибуты:
data-relative-input принимает логические значения и по умолчанию false . Скрепляет положение мыши и расчёты относительно элемента сцены.
data-clip-relative-input принимает логические значения и по умолчанию false . Скрепляет положение мыши и расчёты относительно краёв слоя сцены.
data-hover-only принимает логические значения и по умолчанию false . Включает эффекты только когда мышь наведена на корневой элемент сцены.
data-input-element принимает значения null, HTMLElement / String и по умолчанию null . Позволяет использовать HTML элемент в качестве альтернативы курсору.
data-calibrate-x & data-calibrate-y принимает логические значения и по умолчанию false for X, true for Y . сохраняет значения положения курсора.
data-invert-x & data-invert-y принимает логические значения и по умолчанию true . инвертирует движение слоёв.
data-limit-x & data-limit-y принимает логические значения и по умолчанию false . Ограничивает движение по осям.
scalarX & scalarY принимает float значения и по умолчанию 10.0 . Умножает заданное в атрибутах значение, увеличивая или уменьшая скорость движения и разлёт слоёв.
scalarX & scalarY принимает float между 0 и 1 значения и по умолчанию 0.1 . Выставляет трение слоёв.
originX & originY принимает float между 0 и 1 значения и по умолчанию 0.5 . Выставляет точку отчёта относительно слоя, грубо говоря центр трансформации.
data-precision принимает integer значения и по умолчанию 1 . Выставляет точность в расчёте положения слоёв, округляя значения.
data-selector принимает значения null, String и по умолчанию null . Позволяет непосредствено выбирать слои внутри сцены, по умолчанию берутся все дочерние элементы.
data-pointer-events принимает логические значения и по умолчанию false . Позволяет включить взаимодействие со слоями, при помощи тех же CSS псевдоклассов. По умолчанию взаимодействия нет.
data-pointer-events принимает значения null или function и по умолчанию null . вызывает функцию, когда настройка параллакса завершена.
Читайте также: