Введение в параллакс-скроллинг с использованием Stellar.js

Одним из самых обсуждаемых трендов в веб-дизайне является параллакс-скроллинг. Нравится вам это или нет, но параллакс использует множество веб-сайтов. В этой статье я познакомлю вас с основами параллакс-скроллинга и покажу как можно создать параллакс-скроллинг, используя jQuery плагин Stellar.js.

Что такое параллакс-скроллинг?

Параллакс-скролллинг включает фон, движущийся со скоростью отличной от скорости контента, создавая при прокрутке страницы 3D-эффект. Этот эффект может быть отличным дополнением к любому сайту, но, к сожалению, при злоупотреблении вызывающий раздражение. Время от времени попадаются сайты полностью построенные на этом эффекте и, как правило, опыт работы с такими сайтами не очень располагает. И все потому, что параллакс-эффект обычно анимирует изображения в фоне, при этом полный вес сайта сильно увеличивается и как результат сайт медленно загружается.

Некоторые примеры таких злоупотреблений, на мой взгляд, the Saukoni website that presented the Kinvara 3 и Oakley – I am invincible website, чей все около 20 Мб (раньше было приблизительно 50 Мб!).

Теперь, когда вы имеете представление о том как выглядит этот эффект, давайте посмотрим как мы можем использовать Stellar.js, чтобы воссоздать его.

Что такое Stellar.js

Stellar.js - это jQuery плагин, который позволяет вам легко добавить параллакс-скроллинг эффект к вашему сайту. Несмотря на то что проект больше не поддерживается, плагин по-прежнему стабилен и совместим с последними версиями jQuery; используется разработчиками для своих сайтов. Этот jQuery плагин популярен в реестре jQuery плагинов, и вы, вероятно, уже слышали о нем.

Сейчас, после описания работы плагина, давайте рассмотрим, как вы можете использовать его на вашем сайте.

Приступая к работе с Stellar.js

Начать работы со Stellar.js довольно просто. Сперва скачайте плагин и подключите его к вашей странице.

HTML

<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>

Теперь ваша страница готова к работе с плагином для реализации паралакс-эффекта. Плагин позволяет применить эффект к любому прокручиваемому элементу на странице, например, к объекту window и т.д.. Для этого выбираем элемент при помощи jQuery и затем на нем вызываем метод stellar().

Минимальный код, который использует данную библиотеку для объекта window, показан ниже:

jQuery

$('#someElement').stellar();

Для объекта window библиотека также обеспечивает краткую запись:

jQuery

$.stellar();

В этом случае библиотека будет искать любые параллакс фоны или элементы внутри заданного элемента и изменять их позицию при скроллинге элемента.

Если вы хотите увидеть работу плагина Stellar.js по реализации параллакс-эффекта при скроллинге страницы, то взгляните на это.

Настройки

Stellar.js, как и многие другие плагины, хорошо управляем. Фактически вы можете установить несколько параметров и настроить плагин в зависимости от ваших потребностей. Stellar.js позволяет вам установить как общие настройки для всех элементов, так и настройки для каждого элемента в отдельности. Общие настройки передаются методу stellar(); опции для конкретного элемента устанавливаются посредством data-* атрибутов (атрибут data). В этой секции я не буду рассматривать все возможные опции, но вы можете прочитать о них в спецификации.

Первая основная опция определяет направление эффекта. Классический скроллинг эффект основан на прокрутки сверху вниз или наоборот, но вы можете также указать скроллинг слева направо и наоборот, или оба одновременно. Для этого вы можете использовать два булевых свойства horizontalScrolling и verticalScrolling. Для них значением по умолчанию является true.

Другая интересная опция responsive. Обновляет параллакс контент при загрузки страницы и изменении размеров окна. По умолчанию стоит false.

Последнее опцией, которую стоит рассмотреть, является hideDistantElements. Значение по умолчанию этого свойства true и оно указывает на то, что необходимо скрывать параллакс элементы в случае их нахождения за пределами окна просмотра. Если вы не хотите такого поведения, установите эту опцию в false. (примечание от переводчика: честно говоря я так и не понял работает ли эта опция; кто владеет информацией оставляйте комментарии).

Для отдельных элементов наиболее часто используемым свойством является data-stellar-background-ratio. Это свойство принимает положительное число в качестве значение и позволяет изменить скорость эффекта к конкретному элементу. Например, data-stellar-background-ratio= «0.5» означает, что скорость элемента станет равной половине от фактической скорости прокрутки. Если вы хотите использовать этот атрибут со значением меньше 1-цы, документация предлагает установить background-attachment: fixed; (значение fixed делает фоновое изображение элемента неподвижным: фоновое изображение не прокручивается, в отличие от содержимого элемента) в стилях к элементу.

Зная о том, что делает плагин и как его настроить, приступим к рассмотрению действительного примера.

DEMO

В этом разделе мы создадим рабочий пример на основе плагина Stellar.js с рассмотренными выше опциями. Сперва гам необходимо создать разметку. В следующем коде мы создаем 6 блоков текстом.

HTML

<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>

Далее нам необходимо описать CSS с использованием фоновых изображений. Так как для последних 4-х блоков мы используем data-stellar-background-ratio со значением 0.5, воспользуемся объявлением 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("http://.jpg");
}
#content2 {
    background-image: url("http://.jpg");
}
#content3 {
    background-image: url("http://.jpg");
}
#content4 {
    background-image: url("http://.jpg");
}
#content5 {
    background-image: url("http://.jpg");
}
#content6 {
    background-image: url("http://.jpg");
}

Наконец, нам потребуется запустить эффект через вызов методы stellar(). В этом примере мы также устанавливаем некоторые общие опции:

Живой пример для вышеописанного кода показан ниже:

Источник