Один из наиболее обсуждаемых трендов в веб-дизайне за последние несколько лет – это эффект parallax scrolling (многоуровневый скроллинг). Нравится он вам или нет, его использует большое количество веб-сайтов. Этой статье мы расскажем вам о том, как использовать этот эффект используя плагин jQuery, под названием Stellar.js.
Что такое Parallax Scrolling?
Parallax Scrolling включает в себя фон, который движется в отличном от заднего плана направлении, вследствие чего создается 3D эффект при прокручивании страницы. Этот эффект может стать хорошим дополнением к любому сайту, но если переборщить с его использованием, получится обратный эффект – он будет раздражать. Иногда вы можете встретить сайты, которые спроектированы на основе этого эффекта, и, уверены, что впечатления у вас будут не лучшими. От того, что этот эффект обычно анимирует изображения на заднем плане, сайт становится тяжелым, что приводит к очень медленной загрузке.
Некоторыми примерами злоупотребления этим эффектом, по нашему мнению, являются веб-сайт Saukoni, который представил Kinvara 3, и хорошо известный Oakley – его вес примерно 20Mb (ранее эта цифра достигала 50Mb).
Теперь, когда вы имеете примерное представление о том, как выглядит этот эффект, давайте посмотрим, как мы можем использовать Stellar.js для работы с ним.
Что такое Stellar.js?
Stellar.js – это плагин jQuery, который позволяет легко добавить эффект parallax scrolling на ваш веб-сайт.
Несмотря на то, что он больше не поддерживается, он все еще очень стабильный, совместимый с последними версиями jQuery и большое количество разработчиков используют его для своих сайтов. Этот плагин очень популярный в регистре плагинов jQuery и скорее всего вы о нем уже слышали.
А теперь давайте посмотрим, как вы можете использовать его на своем веб-сайте.
Начнем со Stellar.js
Работать с Stellar.js очень легко. Для начала нужно скачать этот плагин и включить его в свою страницу. Вы можете скачать Stellar.js на сайте GitHub или через Bower. Если вы выбрали вариант использовать Bower, то вам нужно ввести следующую команду:
bower install jquery.stellar
Когда вы скачаете его, вам нужно будет включить Stellar.js на вашу страницу используя обычный script элемент после того, как вы добавите jQuery как это показано ниже:
<script src="path/to/jquery/jquery.min.js"></script> <script src="path/to/jquery.stellar.min.js"></script>
После завершения этого этапа переходим к установке parallax scrolling эффекта на вашу страницу. Этот плагин позволяет вам применить этот эффект любому прокручиваемому элементу, например к объекту window или любому другому имеющемуся объекту. Чтобы это сделать, вам нужно выбрать элемент, используя конструктор jQuery и затем задействовать метод stellar().
Минимальный пример, который использует эту библиотеку для объекта window показан ниже:
$('#someElement').stellar();Для объекта window библиотека также выполняет сокращение:
$.stellar();
С этого момента библиотека будет искать любой parallax фон или элементы в пределах указанного элемента и менять их местоположение, когда элемент прокручивается.
Если хотите взглянуть на примерную страницу с обсуждаемым эффектом, то можете заглянуть сюда.
Опции
Как и многие другие плагины Stellar.js обладает определенной степенью гибкости. Он позволяет вам выбрать некоторые параметры и настроить работу плагина так, как вам это необходимо. Stellar.js позволяет определить основные опции, которые используются с каждым элементом и поэлементными опциями. Основные конфигурации, которые вы хотите установить должны происходить через метод stellar(), в то время как опции на базисе поэлементных установлены с использованием некоторых атрибутов data-*. Мы не будем глубоко вдаваться в тему всевозможных опций, но если вам станет интересно, то вы можете найти больше информации на этом ресурсе.
Для того чтобы определить основные опции, вам нужно решить какие эффекты вы хотите использовать. Классический эффект прокрутки – сверху вниз и наоборот, но вы можете также выбрать слева направо и наоборот, ну или оба варианта сразу. Для того чтобы сделать это вы можете установить свойства Boolean: horizontalScrolling и verticalScrolling. Значение по умолчанию true.
Другая интересная опция называется responsive. Она используется для того, чтобы определить нужно ли освежить контент parallax когда события load и resize работают в объекте window. Значение по умолчанию false.
Еще одна основная опция, о которой хочется упомянуть – это hideDistantElements. Значение по умолчанию в данном случае true и означает, что вы хотите спрятать элемент parallax, который будет двигаться за областью просмотра. Если вам это не нужно, то вам нужно установить значение false для этой опции.
Единственная поэлементная опция, которую также хочется упомянуть – это data-stellar-background-ratio. Кстати, она очень часто используется. Последний принимает положительное число как его значение и позволяет вам изменить скорость эффекта на установленном элементе. Например, data-stellar-background-ratio=”0.5″ означает изменение скорости значения, которое составляет половину стандартной скорости прокрутки. Если вы хотите использовать этот атрибут со значением больше 1, то предполагается установка background-attachment: fixed; в стиле элемента.
А теперь, когда вы знаете, как работать с этим плагином и как делать различные настройки, давайте посмотрим его в действии.
Демо
В этой части мы посмотрим демо, который использует плагин Stellar.js и некоторые опции, о которых мы уже говорили. Для начала, нам нужно настроить разметку. В коде ниже мы создадим 6 div, которые содержат следующий текст:
<div class="content" id="content1">
<p>TEXT HERE</p>
</div>
<div class="content" id="content2">
<p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>С этим HTML мы должны написать некий CSS, чтобы определить используемые фоновые изображения. В нашем демо примере мы будем использовать три изображения, которые повторяются по два раза каждый. Так как мы используем атрибуты data-stellar-background-ratio, на последние три div мы также добавляем background-attachment: fixed; в CSS.
Финальный CSS код будет выглядеть так:
body {
font-size: 20px;
color: white;
text-shadow: 0 1px 0 black, 0 0 5px black;
}
p {
padding: 0 0.5em;
margin: 0;
}
.content {
background-attachment: fixed;
height: 400px;
}
#content1 {
background-image: url(
"//www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content2 {
background-image: url(
"//ocdn.eu/images/pulscms/
ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content3 {
background-image: url(
"//www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}
#content4 {
background-image: url(
"//www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content5 {
background-image: url(
"//ocdn.eu/images/pulscms/
ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content6 {
background-image: url(
"//www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}И наконец, нам нужно запустить работу эффекта вызывая stellar(). В этом демо мы также установили некоторые основные опции:
$.stellar({
horizontalScrolling: false,
responsive: true
});Живой демо предыдущего кода доступен как JSFiddle.
Вывод
Мы познакомились со Stellar.js, плагином jQuery, которые позволяют вам создать эффект прокручивания parallax на страницах вашего веб-сайта. Мы не разобрали все возможные опции и эффекты, но эта статья призвана вызвать интерес для дальнейшей работы.
Высоких конверсий!
