Parallax Scrolling с помощью Stellar.js

Reading time ~8 minutes

Отличный пример создания parallax scrolling с помощью Stellar.js. Оригинал статьи размещен здесь - An Introduction to Parallax Scrolling Using Stellar.js.

Одним из наиболее обсуждаемых трендов в web-дизайне последние несколько лет является эффект

1
parallax scrolling
. Нравиться он вам или нет, но этот эффект сегодня применяется на очень многих сайтах. В этой статье будет дано краткое описание принципа
1
parallax scrolling
и будет показано, как применить этот эффект на странице с помощью jQuery-плагина под названием Stellar.js.

Что такое parallax scrolling

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

Примерами сайтов со злоупотреблением таких эффектов, на мой взгляд, могут послужить Saucony Kinavara 3 и Oakley Airbrake MX. Первый сайт “весит” 50Mb(!), второй сайт - около 20Mb.

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

Что такое Stellar.js

Stellar.js - это jQuery-плагин, с помощью которого можно легко реализовать эффект parallax scrolling на web-странице. Несмотря на то, что этот плагин уже не поддерживается разработчиком, он все еще остается очень надежным, совместим с самыми последними версиями библиотеки jQuery и часто применяется web-разработчиками в проектах (что является показателем). Stellar.js в списке популярных плагинов The jQuery Plugin Registry находится на высших позициях, поэтому вы наверняка о нем слышали или же читали упоминание о нем.

Отлично, вкратце мы познакомились, что такое Stellar.js и можно приступать к процессу создания parallax scrolling на странице с его помощью.

Stellar.js - начинаем работу

Начать работать с плагином Stellar.js очень просто. Для начала нужно скачать этот плагин и подключить к странице. Получить плагин Stellar.js можно двумя способами - из Git-репозитория или с помощью менеджера пакетов Bower. Если остановится на использовании Bower, то в консоли нужно набрать такую команду:

bower install jquery.stellar

Когда плагин Stellar.js получен любым из вышеописанных способов, необходимо подключить его к странице как обычно.

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

1
parallax scrolling
на странице. Этот плагин позволяет применить данный эффект к любому scrolling-элементу на странице, будь то объект
1
window
или любой другой. Для этого нужно выполнить выборку нужного элемента с помощью jQuery, а затем применить к выбранному элементу метод
1
stellar()
.

Самый простой пример применения плагина Stellar.js к объекту показан ниже:

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

Для объекта

1
window
можно использовать и более краткий синтаксис вышеприведенного примера:

$.stellar();

В этом коде производится поиск фоновых изображений или элементов, к которым применяется эффект

1
parallax
; и для этих элементов выполняется пересчет их расположения на web-странице при ее прокрутке.

Если вам хочется взглянуть хотя бы на один готовый пример страницы с

1
parallax scrolling
, созданной с помощью Stellar.js, то можете посетить эту ссылку - Stellar.js Backgrounds Demo.

Настройки Stellar.js

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

Глобальные настройки передаются методу

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

Одной из основных настроек плагина, которая может понадобиться в первую очередь, является выбор направления, в котором будет осуществляться эффект. Классическим вариантом

1
parallax scrolling
является направление
1
parallax
по вертикали - сверху вниз или же наоборот. Однако, с помощью настроек можно задать parallax по горизонтали - слева направо и наоборот. И даже можно задать сразу два направления - по вертикали и по горизонтали. Для управления направлением
1
parallax
в плагине Stellar.js имеются два параметра Boolean-типа:

  • 1
    
    horizontalScrolling
    
    - для управления parallax по горизонтали
  • 1
    
    verticalScrolling
    
    - для управления parallax по вертикали

По умолчанию оба параметра имеют значение

1
true
.

Другим интересным параметров плагина Stellar.js является

1
responsive
. Данная настройка отвечается за возможность обновления содержимого блока с эффектом parallax при наступлении событий
1
load
и
1
resize
объекта
1
window
. Значением по умолчанию является
1
false
.

Последним (достойным внимания) глобальным параметром плагина Stellar.js является

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

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

1
data-stellar-background-ratio
. Расскажу только потому, что он используется очень часто при работе с плагином Stellar.js. Параметр принимает в качестве значения положительное число и управляет скоростью parallax для выбранного элемента.

Например,

1
data-stellar-background-ratio="0.5"
означает, что скорость перемещения элемента при scrolling будет в два раза меньше обычной. Если вы будете использовать данный параметр со значением, меньшим 1, то, согласно документации, для элемента с parallax необходимо применить CSS-правило
1
background-attachment: fixed;
.

Теперь, когда мы познакомились с плагином Stellar.js и научились управлять им с помощью параметров, самое время посмотреть его в действии.

Demo

В этом разделе статьи мы создадим пример кода, в котором применим плагин Stellar.js и настроим его с помощью параметров, рассмотренных ранее. Первым делом нам понадобиться HTML-разметка. Для этого создадим шесть блоков

1
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-стили для задания фоновых изображений. В нашем примере будут использоваться три изображения, при этом каждое из них будет использоваться дважды. Так как к последним трем блокам

1
div
применен атрибут
1
data-stellar-background-ratio
, то в CSS-стилях также необходимо прописать правило
1
background-attachment: fixed;
.

Финальный вариант CSS-кода будет выглядеть таким образом:

@import "compass";
@import "compass/reset";

$white: #fff;
$black: #000;

body {
  font-size: 20px;
  color: $white;
  text-shadow: 0 1px 0 $black, 0 0 5px $black;
}

p {
  padding: 0 .5em;
  margin: 0;
}

.content {
  background-attachment: fixed;
  height: 400px;
  line-height: 400px;
  text-align: center;
}

#content1 {
  background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}

#content2 {
  background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}

#content3 {
  background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

#content4 {
  background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}

#content5 {
  background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}

#content6 {
  background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

Последний шаг, который нужно выполнить, это запустить эффект, вызвав метод

1
stellar()
. Этому методу также передадим несколько аргументов:

$.stellar({
  horizontalScrolling: false,
  responsive: true
});

Stellar.js - parallax scrolling with jQuery

Заключение

В данной статье был рассмотрен плагин Stellar.js для создания эффекта parallax на web-странице. Мною не были рассмотрены все настройки и возможности этого плагина. Но целью этой статьи было заинтересовать читателей плагином Stellar.js для того, чтобы продолжить его изучение самостоятельно.

Что вы думаете о плагине Stellar.js? Вы слышали о таком или же используете его давно?

Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024