SimpleParallax – это очень простая и небольшая библиотека JavaScript, которая позволяет добавить параллакс эффект на любые изображения. Посмотрите примеры ее использования в этой статье.

Скачать исходники для статьи можно ниже

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

Реализация довольно проста, а анимация плавная и естественная.

Демо-сайт с примерами:
“simpleparallax.com/”
Проект на Github:
“github.com/geosigno/simpleParallax”
Также можно скачать данную библиотеку с моего сайта по следующей ссылке – здесь.

Установка Javascript библиотеки SimpleParallax:

Установка очень проста. Вы можете включить скрипт непосредственно в свой 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>

Есть и другие способы подключения библиотеки.

Инициализация js библиотеки:

Чтобы добавить эффект параллакса, можно настроить таргетинг на любые изображения. Например:

<img class="thumbnail" src="image.jpg" alt="image">

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

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

Вы также можете применить параллакс к нескольким изображениям, например:

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

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

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

 <img class="left" src="image.jpg" alt="image">
 <img class="right" src="image.jpg" alt="image">

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

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

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

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

new simpleParallax(image, { 
    scale: 2 
});

Переполнение – еще одна интересная настройка. По умолчанию для переполнения установлено значение false. Если установлено значение true , изображение будет переведено из своего естественного потока.

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

На этом всё, красивых Вам сайтов! Источник: active-vision.ru/blog/