JavaScript

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

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

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

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

Как создать параллакс эффект на сайте? Библиотека simpe Parallax

Вы также можете применить параллакс к тегам 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);
Пример параллакс эффекта css + js
simpleParalax — по умолчанию

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


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

Основы

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

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

  • 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'
});
Пример как сделать параллакс
simpleParalax — orientation: 'left'
Как создать параллакс?
simpleParalax — orientation: 'right'

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

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


JS
new simpleParallax(image, {
  scale: 1.8
});
Параллакс js
simpleParalax — scale: 1.8

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


JS
new simpleParallax(image, {
  overflow: true
});
js библиотека simple Paralax
simpleParalax — overflow: true, orientation: 'left'

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

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


JS
new simpleParallax(image, {
  delay: .6,
  transition: 'cubic-bezier(0,0,0,1)'
});
Простой пример параллакс эффекта на сайте
simpleParalax — delay и transition

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

Написать комментарий