Создаем сайт с эффектом параллакс-прокрутки при помощи Stellar.js

Создаем сайт с параллакс-прокруткой при помощи Stellar.js

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

скачать исходникидемо

Вступление

Эффект параллакс-прокрутки стал популярен, когда несколько лет назад такие сайты, как Nike’s Better World, представили его на своих страницах. Параллакс-эффект относительно интерфейсов существует примерно с 1980-х гг., когда его впервые применили в названиях видеоигр и впоследствии в самих играх. Позже он стал появляться в веб-интерфейсах – вы ознакомитесь с silverbackapp, который применил этот эффект в качестве части заголовка.

Будучи скомбинированными с функциональностью прокрутки вебсайта, эффекты параллакс-прокрутки оказывают сильное визуальное воздействие, особенно будучи скомбинированными с неким видом рассказа, ведущим вас в путешествие.

Пара…Что?

Параллакс – это сдвиг или различие в видимой позиции объекта, рассматриваемого с двух различных линий зрения. – Wikipedia

Так что же в точности такое эффект параллакса? Ну, возможно, это одна из тех вещей, на которые ссылаются ваши клиенты, говоря «вслепую»: “Я хочу сайт в HTML5″. Когда клиенты просят сайт на “HTML5″, мне приходится отдельно спрашивать их, что они понимают под HTML5 – в этот момент он кажется просто модным словечком, которое клиенты повторяют, в сущности не понимая его значения.

Так что HTML5 ли это? Конечно, HTML5 играет свою роль в эффекте параллакс-прокрутки, но это не просто HTML5, в ней также используется некая форма javascript, такая как jQuery, и она невозможна без небольшого количества CSS3.

Изначально слово параллакс происходит от греческого параллаксис, что означает «изменение». У объектов, которые находятся ближе к глазу, имеется больший параллакс, чем у объектов, находящихся на расстоянии. Это значит, что более близкие нам объекты кажутся движущимися быстрее фоновых объектов.

Расслоение множественных фонов и объектов (таких как изображения), и затем их движение на разных скоростях создает ощущение глубины и объема.

Параллакс в действии

Рассмотрите несколько примеров демонстрации параллакс-эффектов (изображения кликабельны).

Каждый вебсайт рассказывает историю

Вышеприведенные примеры берут вас в некий вид путешествия или события, и делают это самыми различными способами. Так, по моему, и создается успех сайта с параллакс-прокруткой. Ключ к проектированию интересного и уникального творения – сосредоточение на хорошей истории и концепции, а затем – применение эффекта с помощью творческих и образных способов.

Wieden+Kennedy (W&K), ребята, стоящие за вебсайтом Nike Better World поддерживают эту мысль:

По нашему мнению, технологии независимы от концепции. Мы в основном фокусировались на создании отличного впечатления от интерактивного рассказа. – Wieden+Kennedy (W&K)

Как будет работать наш сайт

Для демонстрации одного из способов осуществления параллакс-прокрутки, я предпочел показать вам простой сайт из четырех слайдов, в котором эффект применяется на различных фонах и изображениях. Также в верхнем левом углу я добавил навигацию, которая может прокрутить на отдельный слайд сайта, и, кроме того, меняет свой размер при отражении номера активного слайда. Я также использую веб-шрифт Bebas, хотя вы может по желанию взять что-нибудь другое.

Вот такая у нас будет структура папок:

Примененные плагины

Stellar.js

Чтобы добиться намеченного, я применяю Stellar.js, плагин jquery от Марка Дэлглиша (Mark Dalgleish), с помощью которого создавать сайты с параллакс-прокруткой легко и просто. В конце статьи я перечислил другие плагины, с помощью которых можно это сделать. Я предпочел использовать Stellar.js, потому что его довольно просто применять и, хотя это в учебнике не показано, можно оптимизировать для работы на платформах интеллектуальных устройств, таких как iOS.

Waypoints

Я также собираюсь применить jQuery waypoints Калеба Тротона (Caleb Troughton). Waypoints – это другой плагин jQuery, исполняющий функцию при прокрутке элемента. Он дает возможность навигации сайта определить в соответствии с положением полосы прокрутки, на каком слайде мы находимся.

jQuery Easing

jQuery easing – это плагин от GSGD, предлагающий передовые опции ослабления. Мы применим его, чтобы при переходах от слайда к слайду получить красивое, легкое перемещения.

Разметка HTML

Начав с index.html, добавляем HTML5 doctype, затем создаем раздел head. Он состоит из CSS Reset, за чем следует таблица стилей styles.css. Затем добавляем библиотеку jQuery, после которой идет наш пользовательский файл jQuery js.js. За ним, в свою очередь, следуют три плагина — jquery.stellar.min.js,waypoints.min.js и jquery.easing.1.3.js.

Следующий элемент нашего html – изображение логотипа Envato, находящийся в постоянном фиксированном положении на всем сайте. Добавляем для него класс envatologo, чтобы можно было позже при кодировании CSS установить его позиционирование.

Слайды

У четырех слайдов одна разметка:

Мы применяем класс slide, который будет использоваться как общий стиль всех слайдов. Затем каждому слайду назначается id slide, за которым следует номер слайда, например, Slide1. Применяем атрибут данных HTML5 и называем его data-slide. Это позволит нам выделить его с помощью jQuery как целевой объект. Добавлен другой атрибут данных data-stellar-background-ratio. Он – специально для плагина jQuery stellar.js и говорит тому, в каком соотношении должна прокручиваться скорость элемента.

Соотношение корреспондирует обычной скорости прокрутки, поэтому соотношение в 0.5 заставит элемент прокручиваться на половинной скорости, при соотношении в 1 никакого эффекта не произойдет, а при соотношении в 2 элемент станет прокручиваться с удвоенной скоростью.

У всех слайдов, кроме четвертого, есть кнопка, которая позволит нам прокручивать к следующему слайду. Мы добавляем ей атрибут data-slide со значением номера следующего слайда. Так кнопке становится известно, какой слайд следующий, поэтому можно передать данное значение в jQuery. У большинства слайдов, кроме того, имеется интервал с классом slideno; просто большая текстовая версия номера слайда, который появляется в нижнем левом углу большей части слайдов. Его также можно использовать для названий.

Для третьего и четвертого слайдов мы еще добавляем несколько элементов-изображений в div slide. Эти изображения обеспечат настоящее понимание создаваемого нами эффекта параллакса. Мы оборачиваем их в div wrapper шириной 960px, который будет центрирован, чтобы гарантировать хорошее отображение в мониторах десктопов всех размеров.

К каждому изображению прикреплен атрибут data-stellar-ratio. Он, опять же, является специфичным для stellar.js и говорит плагину, в каком скоростном соотношении мы должны прокручивать элемент.

CSS

К счастью для нас, здесь задействовано совсем немного CSS. Это – базовые стили нескольких простых элементов, а по большей части – позиционирование некоторых элементов-изображений.

Первое, что нужно сделать в CSS – это ввести шрифт BEBAS с помощью @font-face. Затем добавляем его в html для определения шрифта сайта. Также устанавливаем ширину и высоту html и body на 100%. Так наши слайды смогут адаптироваться к полной ширине и высоте экрана пользователя.

Навигация

Позиция основной навигации установлена на fixed, чтобы на протяжении всего сайта удерживать ее в одном месте. Мы делаем сверху офсет в 20px, чтобы над ней было немного свободного пространства и устанавливаем z-index на 1, чтобы обеспечить ее пребывание в верхнем слое сайта.

В действительности весь список – это просто стили текста с границей, проходящей внизу в качестве подчеркивания. Ее ширина 53px. Также добавлен переход, анимирующий стандартное состояние навигации в состояние наведения мыши. Я воспользовался здесь префиксом -webkit- просто для сокращения кода, а полный исходный код, который можно скачать выше, содержит все префиксы.

Состояние наведения мыши применяет те же свойства, что и класс active; по существу, только увеличение размера и ширины шрифта. Класс active применен jQuery для назначения стилей соответствующему слайду, видимому в окне браузера.

Логотипу envato назначены несколько позиционирующих стилей, просто для обеспечения его местоположения в центре экрана. Аналогично навигации, ему также назначен z-index в 1, чтобы он оставался сверху.

Теперь перейдем к стилям самих слайдов. Назначаем им свойство привязки к фону fixed. Свойство привязки к фону background-attachment определяет, зафиксировано ли фоновое изображение или прокручивается вместе с остальной страницей, так что оказывается пригодным для фоновых изображений (таких, как примененные на слайде четыре). Для этого примера мы использовали обои Филиппа Сайферта (Philipp Seiffert), которые можно скачать здесь. Устанавливаем позиционирование слайда на relative. Благодаря этому мы можем абсолютно расположить классы slideno и button перед слайдом в отличие от действующего документа.

Тень блока применена в чисто декоративных целях и добавляет к верхней внутренней стороне каждого слайда красивую отбрасываемую тень.

.button – для кнопки внизу страницы, которая позволяет нам перейти к следующему слайду. Мы поместили ее по центру внизу каждого слайда и использовали в качестве указателя изображение стрелки.

Стили отдельного слайда сравнительно просты и каждый раз повторяют один шаблон. У первого слайда цвет фона #5c9900. У второго тоже есть установленный фоновый цвет. Также слайд два содержит изображения и каждое из них мы можем выбрать в качестве цели, применив селектор CSS nth-child(n). Этот селектор можно описать как:

Этот псевдокласс подбирает элементы на основании их расположения внутри списка дочерних элементов родительского элемента.

Так что мы в общем назначаем стили каждому изображению в том порядке, в котором они появляются в нашей разметке. Мы просто размещаем их относительно обертки слайда.

Слайд три следует тому же порядку, что и слайд два.

Четвертый слайд слегка отличатся от предыдущих двух, так как не содержит элементов-изображений и цвета фона, а вместо того применяет фоновое изображение. Также мы назначили ему свойство CSS3 background-size:cover. Оно в основном устанавливает фоновое изображение, чтобы то покрывало все окно браузера и меняет размер по мере изменения окна браузера. Также мы добавили строку текста в последнем слайде, которому назначили стили и класс parallaxbg.

jQuery

На самом деле jQuery как раз оживляет весь дизайн. Я прокомментировал код, чтобы можно было видеть, что в точности происходит.

Еще несколько моментов

Если посмотреть на слайд два нашего примера, вы заметите пузыри в 3D. Я добавил к некоторым из них легкое Гауссово размытие, в основном к тем, которые на переднем плане, и к фоновым. Сочетание их с четко фокусированными пузырями добавляет ощущения глубины, создаваемого параллаксом. При попытке создания в своем сайте красивой глубины стоит обдумать этот момент.

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

Заключение

Параллакс-прокрутка в настоящее время – один из излюбленных эффектов, и его границы постоянно расширяются. Здесь и сейчас я показал вам, как установить основной вебсайт, применяющий параллакс-прокрутку. Демоверсия, показанная сегодня – это сравнительно простой сайт в учебных целях. Тех из вас, кто вот-вот создаст сайт с использованием этого эффекта, умоляю потратить время на выработку концепции и истории, потому что именно это делает его уникальным, многопользовательским и действительно доставляющим удовольствие. Применяйте этот эффект мудро, а не просто ради того, чтобы применить.

Надеюсь, вам понравилось читать о параллакс-прокрутке, и я хотел бы увидеть, как вы, ребята, применили ее на своих сайтах, так что не постесняйтесь оставить на них ссылки ниже. Увидимся!

Автор: Aaron Lumsden

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (12)