Отличный пример создания parallax scrolling с помощью Stellar.js. Оригинал статьи размещен здесь - An Introduction to Parallax Scrolling Using Stellar.js.
Одним из наиболее обсуждаемых трендов в web-дизайне последние несколько лет является эффект 1
parallax scrolling
1
parallax scrolling
Что такое 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
1
window
1
stellar()
Самый простой пример применения плагина Stellar.js к объекту показан ниже:
$('#someElement').stellar();Для объекта 1
window
$.stellar();В этом коде производится поиск фоновых изображений или элементов, к которым применяется эффект 1
parallax
Если вам хочется взглянуть хотя бы на один готовый пример страницы с 1
parallax scrolling
Настройки Stellar.js
Stellar.js, как и большинство других плагинов подобного рода, достаточно гибок в настройке. В нем есть несколько параметров, с помощью которых можно задать нужный вариант работы. В Stellar.js все настройки делятся на два типа - глобальные (оказывают влияние на все элементы) и локальные, имеющие отношение только к конкретному элементу.
Глобальные настройки передаются методу 1
stellar()
1
data-*
Одной из основных настроек плагина, которая может понадобиться в первую очередь, является выбор направления, в котором будет осуществляться эффект. Классическим вариантом 1
parallax scrolling
1
parallax
1
parallax
1
horizontalScrolling
1
verticalScrolling
По умолчанию оба параметра имеют значение 1
true
Другим интересным параметров плагина Stellar.js является 1
responsive
1
load
1
resize
1
window
1
false
Последним (достойным внимания) глобальным параметром плагина Stellar.js является 1
hideDistantElements
1
true
1
hideDistantElements
1
false
Единственным специфичным для элемента параметром плагина Stellar.js, о котором я расскажу в этой статье, является 1
data-stellar-background-ratio
Например, 1
data-stellar-background-ratio="0.5"
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
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 на web-странице. Мною не были рассмотрены все настройки и возможности этого плагина. Но целью этой статьи было заинтересовать читателей плагином Stellar.js для того, чтобы продолжить его изучение самостоятельно.
Что вы думаете о плагине Stellar.js? Вы слышали о таком или же используете его давно?