Параллакс эффект на сайте — приём, при котором изображение движется медленнее страницы во время скролла, создавая иллюзию глубины. Сделать параллакс можно через CSS — свойство background-attachment: fixed , но оно не работает на iOS и применимо только к фоновым изображениям. SimpleParallax решает это через JavaScript: около 2 КБ в сжатом виде, никаких зависимостей, никакого jQuery. Главный козырь — работает напрямую с тегом <img> , не заставляя переносить изображения в background-image . Хотите добавить параллакс на сайт, не трогая вёрстку? Это оно.
Библиотека поддерживает <img> , <picture> , <video> , <svg> и другие HTML-элементы. SimpleParallax доступна на GitHub и поддерживается всеми современными браузерами. За вдохновением перед стартом — загляните в наш топ-10 сайтов с параллакс-эффектом.
Установка SimpleParallax
Самый быстрый способ — CDN. Добавьте скрипт перед закрывающим </body> :
<!-- Перед </body> -->
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js/dist/simpleParallax.min.js"></script>Для проектов с npm или Yarn:
npm install simple-parallax-js
# или
yarn add simple-parallax-jsПосле установки через пакетный менеджер — импортируйте в нужном модуле:
// ES-модуль
import simpleParallax from 'simple-parallax-js';Как сделать параллакс эффект на сайте
Добавьте изображение в разметку и инициализируйте библиотеку буквально две строки кода:
const image = document.querySelector('.thumbnail');
new simpleParallax(image);<!-- любое изображение на странице -->
<img class="thumbnail" src="image.jpg" alt="моя картинка">
simpleParallax — по умолчанию, orientation: up
Параллакс пример выше с настройками по умолчанию. Направление — orientation: 'up' : при прокрутке вниз изображение смещается снизу вверх, создавая ощущение глубины. Это самый универсальный вариант и хорошая отправная точка для большинства сценариев.
Чтобы применить параллакс сразу ко всем изображениям на странице — передайте результат querySelectorAll напрямую:
const images = document.querySelectorAll('img');
new simpleParallax(images);JS параллакс: ориентация
Параметр orientation задаёт направление смещения изображения. Доступно восемь значений:
- Основные: up , down , left , right
- Диагональные: up left , up right , down left , down right
Чтобы применить разные ориентации к разным изображениям — создайте отдельный экземпляр для каждого. Несколько экземпляров не влияют на производительность:
new simpleParallax(document.querySelector('.img-left'), {
orientation: 'left'
});
new simpleParallax(document.querySelector('.img-right'), {
orientation: 'right'
});<img class="img-left" src="image.jpg" alt="первая картинка">
<img class="img-right" src="image.jpg" alt="вторая картинка">orientation: left
orientation: right
Масштаб (scale)
Параллакс работает за счёт масштабирования: библиотека увеличивает изображение, чтобы при смещении не было видно краёв. Параметр scale задаёт степень увеличения (по умолчанию 1.3 ). Чем выше значение — тем заметнее эффект, но и тем сильнее изображение «расплывается» при масштабировании. Для большинства задач хватает диапазона 1.3–1.6. Учитывайте это при подготовке картинок: при scale 1.3 изображение увеличивается на 30%, значит исходник должен быть соответствующего размера, иначе при увеличении появятся артефакты сжатия. Портретные изображения лучше работают с вертикальными ориентациями ( up , down ), а широкие горизонтальные — с боковыми ( left , right ).
new simpleParallax(image, {
scale: 1.8
});scale: 1.8 — более выраженный эффект
Overflow — выход за пределы
По умолчанию overflow: false — изображение аккуратно обрезается своим контейнером. При overflow: true оно вырывается за пределы блока, что создаёт совершенно другой визуальный эффект — особенно выразительно в связке с боковой ориентацией:
new simpleParallax(image, {
orientation: 'right',
overflow: true
});overflow: true, orientation: right
Плавность: delay и transition
Параметр delay добавляет инерцию: после остановки скролла изображение ещё ненадолго продолжает движение. Значение задаётся в секундах. В паре с transition — CSS-функцией плавности — можно добиться мягкого, почти физически достоверного скольжения:
new simpleParallax(image, {
delay: 0.6,
transition: 'cubic-bezier(0, 0, 0, 1)'
});delay: 0.6, transition: cubic-bezier(0, 0, 0, 1)
Значение delay 0.4–0.6 в паре с cubic-bezier(0, 0, 0, 1) — хорошая отправная точка. Больше 1 — начинает выглядеть тяжеловато, меньше 0.3 — эффект почти незаметен.
Все параметры SimpleParallax
- orientation — направление смещения. По умолчанию: 'up' .
- scale — коэффициент масштабирования изображения. По умолчанию: 1.3 .
- overflow — разрешить выход изображения за пределы контейнера. По умолчанию: false .
- delay — инерция в секундах: изображение продолжает движение после остановки скролла. По умолчанию: 0 .
- transition — CSS transition-функция для параметра delay. По умолчанию: 'null' .
- maxTransition — ограничение смещения в процентах (0 — без ограничений). По умолчанию: 0 .
- customWrapper — CSS-селектор для обёртки, которую создаёт библиотека вокруг изображения.
SimpleParallax — простой способ сделать параллакс эффект на сайте: минимум кода, максимум совместимости, никакого влияния на вёрстку. Все параллакс примеры из этой статьи работают прямо в браузере — берите за основу и адаптируйте под свой проект. Если нужен многослойный параллакс на сайте с независимыми скоростями для разных слоёв — посмотрите на параллакс скроллинг на чистом JavaScript.
