Простой способ создать параллакс эффект js с библиотекой simpleParallax

Simple Parallax — это крошечная и очень простая JS библиотека, которая позволяет сделать параллакс эффект на любых изображения.

Параллакс эффект добавляется непосредственно на теги img, вам не нужно использовать свойство background-image, как во многих других параллакс библиотеках. В принципе, вы можете добавить эффекты параллакса на уже готовый сайт, не нарушая его макет. Перед началом работы не забудьте посмотреть наш топ 10 сайтов с параллакс эффектом

Вы также можете применить параллакс к тегам picture и srcset. Реализовать эффект просто, а анимация получается плавная и естественная.

Установка

Установить библиотеку просто, достаточно скачать simple Parallax и добавить скрипт в свой html:

HTML
<script src="simpleParallax.js"></script>
<!--либо CDN-->
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.0.2/dist/simpleParallax.min.js"></script>

Или можно установить библиотеку через пакетный менеджер npm/yarn:

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

После установки с помощью пакетного менеджера вы можете импортировать ее следующим образом:

import simpleParallax from 'simple-parallax-js';

Инициализация

Вы можете использовать любые изображения, чтобы добавить на них js параллакс. Например:

HTML
<img class="thumbnail" src="image.jpg" alt="моя картинка">

Просто добавьте следующий JavaScript код:

JS
var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

Параллакс возможно применить сразу на нескольких изображениях:

JS
var images = document.querySelectorAll(img);
new simpleParallax(images);

Основы

Если вы не зададите никаких параметров, по умолчанию simpleParallax будет использовать направление вверх. Это приведет к смещению изображения снизу вверх при прокрутке вниз, и сверху вниз при прокрутке вверх.

Анимация при прокрутке страницы с библиотекой AOS js

Можно выбрать следующие направления:

• up
• right
• down
• left
• up left
• up right
• down left
• down right

Чтобы применить разные настройки к разным изображениям, можно инициализировать несколько экземпляров simpleParallax, это не скажется на производительности.

HTML
<img class="left" src="image.jpg" alt="первая картинка">
<img class="right" src="image.jpg" alt="вторая картинка">

JS
var imageLeft = document.querySelector('.left'),
  imageRight = document.querySelector('.right');

new simpleParallax(imageLeft, {
  orientation: 'left'
});
new simpleParallax(imageRight, {
  orientation: 'right'
});

Дополнительные настройки

JS параллакс создается с помощью scale — масштабирования, применяемого к изображению. Scale можно легко изменить (значение по умолчанию-1.3). Чем выше будет значение scale, тем быстрее и заметнее будет эффект параллакса.

JS
new simpleParallax(image, {
  scale: 1.8
});

Overflow — еще одна интересная настройка. По умолчания overflow имеет значение flase. Если установлено значение true, изображение будет вырвано из потока.

JS
new simpleParallax(image, {
  overflow: true
});

Если установить параметр delay, то есть задержку. Когда пользователь прекратит прокрутку, изображение ненадолго продолжит движение. Это дает очень хороший эффект

Как привязать параллакс эффект к движению мыши?

В связке с delay работает настройка transition. Она добавит любой CSS эффект к настройке delay

JS
new simpleParallax(image, {
  delay: .6,
  transition: 'cubic-bezier(0,0,0,1)'
});

Надеюсь, что этот туториал был вам полезен. А что, если вы хотите сделать параллакс из нескольких слоев? Тогда вам стоит посмотреть нашу статью про классный параллакс скроллинг для сайта.