Очередная порция параллакс-эффекта для сайта в виде подборки JS-плагинов. Как говорится, много не бывает. Учитывая особенности, возможности каждого – можно делать огромную коллекцию.
В этот раз мы рассмотрим пять плагинов параллакс эффекта на JS. Все они по-своему хороши: кто-то работает только с картинками, кто-то с HTML-элементами, видео, с background-image и т.д.
Предыдущие подборки по теме:
Анимация при скроллинге
Подборка анимации при прокрутке страницы
Как сделать параллакс эффект?
Если кто-то не хочет заморачиваться с JS параллаксом, может просто использовать CSS свойства background-attachment: fixed
. Если, конечно, будет позволять обстоятельства работы. Но, а мы сделаем параллакс эффект при помощи JS, который создает интересный и впечатляющий вид анимации.
simplePARALLAX.js
Легкая и простая Vanilla JS библиотека, которая применяется непосредственно к тегам изображениям img
. Есть ряд настроек. С их помощью можно менять скорость параллакса, направление: влево, вправо и т.д.
Подключение JS
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script> <!-- Базовая настройка --> <script> var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image); </script> <!-- Движение параллакса вправа --> <script> var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { orientation: 'right' }); </script> <!-- Параллакс с увеличением --> <script> var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { scale: 1.5 }); </script> <!-- Параллакс без границ --> <script> var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { overflow: true }); </script> <!-- Параллакс с задержкой --> <script> var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { delay: .6, transition: 'cubic-bezier(0,0,0,1)' }); </script> <!-- Параллакс с очень плавной прокруткой --> <script> var image = document.getElementsByClassName('thumbnail'); new simpleParallax(image, { maxTransition: 60 }); </script>
HTML
<img class="thumbnail" src="image.jpg" alt="image">
ukiyo-js
Помимо того, что это библиотека легкая, её возможности намного расширены чем у предыдущей. Она может добавлять параллакс к видео, к тегу img
и даже к фоновой картинке background-image
.
Подключение JS
<script src="https://cdn.jsdelivr.net/npm/ukiyojs@3.0.3/dist/ukiyo.min.js"></script> <script> const image = document.querySelector('.ukiyo');//класс картинки для применения параллакс new Ukiyo(image) </script>
HTML
<!-- Для тега <img> --> <img class="ukiyo" src="image.jpg"> <!-- Для тега <picture> --> <picture> <source srcset="~"> <img class="ukiyo" src="image.jpg"> <picture> <!-- Для видео --> <video class="ukiyo" src="~" type="~"> <!-- Для background-image --> <div class="ukiyo"></div>
Stellar.js
Простая и легкая библиотека параллакс. Применяется к картинкам, а также непосредственно к background-image
.
Подключение JS
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.1/jquery.stellar.min.js"></script> <script> $.stellar(); </script>
HTML
<!-- Для background-image --> <div data-stellar-background-ratio="0.5"> <!-- Для элементов --> <div data-stellar-ratio="2">
Scrollme
Параллакс любых HTML-элементов. Чем-то похоже на анимацию при скроллинге, только движущие элементы встают на свою позицию в зависимости от прокручивания страницы.
Подключение JS
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/jquery.scrollme.min.js"></script>
HTML
<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that's all. </div> </div>
jScrollability
Еще одна библиотека, которая работает с jQuery. С её помощью можно создать анимированное движение любых HTML-элементов.
Подключение JS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jScrollability.min.js"></script> <script> (function($) { $(document).ready(function() { $.jScrollability([ { 'selector': '.slide-in-demo', 'start': 'parent', 'end': 'parent', 'fn': { 'left': { 'start': 100, 'end': 0, 'unit': '%' } } }, { 'selector': '.reveal-demo', 'start': 'parent', 'end': 'parent', 'fn': { 'top': { 'start': 100, 'end': 20, 'unit': '%' } } }, { 'selector': '.text-wrapper', 'start': function($el) { return $el.offset().top + $el.height() }, 'end': 'parent', 'fn': function($el,pcnt) { var $spans = $el.find('span'); var point = Math.floor(($spans.length+1) * pcnt); $spans.each(function(i,el) { var $span = $(el); if (i < point) { $span.addClass('visible'); } else { $span.removeClass('visible'); } }); } } ]); }); })(jQuery); </script>
HTML
<div class="section section-0"> <h1>jScrollability</h1> <h2>Scroll Down</h2> </div> <div class="section section-1"> <span class="slide-in-demo">Slide elements in</span> </div> <div class="section section-2"> <span class="reveal-demo">Reveal From Bottom</span> </div> <div class="section section-3"> <p class="text-wrapper"> <span>Even reveal</span> <span>whole spans</span> <span>of text</span> <span>within</span> <span>long paragraphs</span> <span>while the user</span> <span>scrolls</span> <span>with jScrollability.</span> </p> </div>