Одним из наиболее обсуждаемых направлений веб-дизайна последних лет является эффект прокрутки параллакса. Нравится вам это или нет, он используется многими веб-сайтами. В этом уроке я кратко познакомлю вас с прокруткой параллакса и покажу, как мы можем воспроизвести ее на веб-сайте с помощью плагина jQuery под названием Stellar.js.
Что такое параллакс-скроллинг?
Прокрутка параллакса включает в себя перемещение фона с другой скоростью, чем на переднем плане, создавая 3D-эффект при прокрутке страницы. Этот эффект может быть хорошим дополнением к любому веб-сайту, но, к сожалению, при злоупотреблении он может быть довольно раздражающим. Время от времени вы будете находить сайты, полностью работающие на этом эффекте, и ваш опыт не будет изящным. Поскольку этот эффект обычно анимирует изображения в фоновом режиме, общий вес сайта сильно увеличивается, что приводит к очень медленной загрузке.
Некоторыми примерами такого злоупотребления, на мой взгляд, являются веб-сайт Saukoni, представляющий Kinvara 3 , и известный Oakley — я непобедимый веб-сайт, чей вес составляет ~ 20 МБ (ранее это было ~ 50 МБ !).
Теперь, когда у вас есть представление о том, как выглядит этот эффект, давайте посмотрим, как мы можем использовать Stellar.js для его создания.
Что такое Stellar.js?
Stellar.js — это плагин jQuery, который позволяет легко добавить эффект прокрутки параллакса на ваш сайт. Несмотря на то, что он больше не поддерживается, он все еще очень стабилен, совместим с последними версиями jQuery, и многие разработчики используют его на своих сайтах. Этот плагин 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>
После выполнения этого шага вы все настроены на применение эффекта прокрутки параллакса на своих страницах. Этот плагин позволяет применять эффект к любому элементу прокрутки, например, к объекту window или любому другому элементу, который у вас может быть. Для этого вы должны выбрать элемент с помощью конструктора jQuery, а затем вызвать для него метод stellar() .
Минимальный пример, который использует эту библиотеку на объекте window показан ниже:
$('#someElement').stellar();
Для объекта window библиотека также предоставляет удобное сокращение, показанное ниже:
$.stellar();
На этом этапе библиотека будет искать любые фоны параллакса или элементы в пределах указанного элемента и перемещать их, когда элемент прокручивается.
Если вам нужен пример страницы, которая использует Stellar.js для создания эффекта прокрутки параллакса, вы можете взглянуть на этот .
Параметры
Stellar.js , как и многие другие плагины, обладает определенной степенью гибкости. Фактически, он позволяет вам установить несколько параметров и настроить работу плагина в соответствии с вашими потребностями. Stellar.js позволяет вам определять общие параметры, которые используются для каждого элемента, и параметры для каждого элемента. Общая конфигурация, которую вы хотите установить, должна передаваться методу stellar() при его вызове, в то время как параметры для каждого элемента устанавливаются с помощью некоторых атрибутов data-* . В этом разделе я не буду охватывать все доступные варианты, поэтому, если вам интересно продолжить исследование, вы можете прочитать этот конкретный раздел репозитория .
Первые общие параметры, которые вы можете определить, это определить направление, в котором вы хотите, чтобы эффект был разрешен. Классический эффект прокрутки сверху вниз и наоборот, но вы также можете указать эффект слева направо и наоборот, или даже оба. Для этого вы можете отрегулировать два логических свойства horizontalScrolling и verticalScrolling . Их значение по умолчанию — true .
Еще один интересный вариант — responsive . Он используется для указания необходимости обновления содержимого параллакса при resize события load и resize объекта window . Значением по умолчанию является false .
Последний общий вариант, который я хочу обсудить, это hideDistantElements . Значением по умолчанию этого свойства является true и укажите, что вы хотите скрыть элементы параллакса, которые выходят за пределы области просмотра. Если вы не хотите такого поведения, вы должны установить для этой опции значение false .
Единственная опция для каждого элемента, которую я хочу охватить, потому что она часто используется, это data-stellar-background-ratio . Последний принимает положительное число в качестве значения и позволяет изменять скорость воздействия на элемент, к которому он применяется. Например, data-stellar-background-ratio="0.5" означает изменение скорости до значения, равного половине естественной скорости прокрутки. Если вы хотите использовать этот атрибут со значениями ниже 1, документация предлагает установить background-attachment: fixed; в стиле элемента.
Теперь, когда вы знаете, что делает этот плагин и как вы можете его настроить, пришло время снова увидеть его в действии.
демонстрация
В этом разделе мы разработаем демонстрационную версию, в которой используется плагин Stellar.js, а также некоторые параметры, которые мы обсуждали в предыдущем разделе. Во-первых, нам нужно настроить разметку. В следующем коде мы создадим шесть 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("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"); }
Наконец, нам нужно запустить эффект, вызвав функцию stellar() . В этой демонстрации мы также установим несколько общих параметров:
$.stellar({ horizontalScrolling: false, responsive: true });
Демонстрационная версия предыдущего кода показана ниже и также доступна в виде JSFiddle .
Вывод
В этой статье я познакомил вас со Stellar.js, плагином jQuery, который позволяет создавать эффект прокрутки параллакса на страницах веб-сайта. Я не охватил все доступные варианты и эффекты, но этот урок должен был заинтересовать вас достаточно, чтобы узнать больше об этом.
Что вы думаете о Stellar.js? Вы когда-нибудь слышали или использовали это?