Очередная порция параллакс-эффекта для сайта в виде подборки 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>