Создаем сайт с эффектом параллакс-прокрутки при помощи 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.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a parallax Website using Stellar.js</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

</head>

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

<img class="envatologo" src="images/envatologo.png">

Слайды

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

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
    <a class="button" data-slide="2" title=""></a>
</div><!--End Slide 1-->

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

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

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

<span class="slideno">Slide 1</span>

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

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

<div class="wrapper">

            <img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
            <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
            <img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
            <img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
            <img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
            <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">

</div>

CSS

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

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

@font-face {
    font-family: 'BebasRegular';
    src: url('font/BEBAS___-webfont.eot');
    src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
    url('font/BEBAS___-webfont.woff') format('woff'),
    url('font/BEBAS___-webfont.ttf') format('truetype'),
    url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    } 

html,body{
    font-family: 'BebasRegular';
    width:100%;
    height:100%;
}

Навигация

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

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

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

.navigation {
    position:fixed;
    z-index:1;
    top:20px;
}
.navigation li {
    color:#333333;
    display:block;
    padding: 0 10px;
    line-height:30px;
    margin-bottom:2px;
    font-weight:bold;
    -webkit-transition: all .2s ease-in-out;
    border-bottom:1px solid black;
    text-align:left;
    width:53px;
}
.navigation li:hover,
.active {
    font-size:25px;
    cursor:pointer;
    width:100px!important;
}

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

.envatologo { 
    position:fixed; 
    top:50%; 
    left:50%; 
    width:446px; 
    margin-top:-41px; 
    margin-left:-223px; 
    z-index:1; 
}

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

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

.slide {
    background-attachment: fixed;
    width:100%;
    height:100%;
    position: relative;
    box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper {
    width:960px;
    height:200px;
    margin:0 auto;
    position:relative;
}
.slideno {
    position:absolute;
    bottom:0px;
    left:0px;
    font-size:100px;
    font-weight:bold;
    color:rgba(255,255,255,0.3);
}

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

.button{
    display:block;
    width:50px;
    height:50px;
    position:absolute;
    bottom:0px;
    left:50%;
    background-color:#333333;
    background-image:url(../images/arrow.png);
    background-repeat:no-repeat;
}
.button:hover{
    background-color:#494949;
    cursor:pointer;
}

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

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

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

/******************************
 SLIDE 1
*******************************/
#slide1{
    background-color:#5c9900;
     
}
/******************************
 SLIDE 2
*******************************/
#slide2{
    background-color:#005c99;
     
}
#slide2 img:first-child{
    position:absolute;
top: 700px;
left: -150px;
}
#slide2 img:nth-child(2){
    position:absolute;
    top:300px;
    left:100px;
}
#slide2 img:nth-child(3){
    position:absolute;
    top:600px;
    left:300px;
}
#slide2 img:nth-child(4){
    position:absolute;
    top:400px;
    left:300px;
}
#slide2 img:nth-child(5){
    position:absolute;
    top:600px;
    right:300px;
}
#slide2 img:nth-child(6){
    position:absolute;
    top:600px;
    right:300px;
}
#slide2 img:nth-child(7){
    position:absolute;
    top:400px;
    right:100px;
}
#slide2 img:nth-child(8){
    position:absolute;
    top:100px;
    right:300px;
}

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

/****************************** SLIDE 3 *******************************/ 
#slide3 {  
    background-color:#b6c10b; 
} 
#slide3 img:first-child {  
    position:absolute; 
    top: 700px; 
    left: 300px;
} 
#slide3 img:nth-child(2){  
    position:absolute;     
    top:100px;     
    left:100px; 
} 
#slide3 img:nth-child(3){  
    position:absolute;     
    top:150px;     
    left:300px; 
} 
#slide3 img:nth-child(4){  
    position:absolute;     
    top:450px;     
    left:300px;
} 
#slide3 img:nth-child(5){  
    position:absolute;     
    top:200px;     
    right:300px; 
} 
#slide3 img:nth-child(6){  
    position:absolute;     
    top:100px;     
    right:300px; 
}

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

/******************************
 SLIDE 4
*******************************/
 
#slide4{
    background-image:url(../images/Slide4/desktop4.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#slide4 .parallaxbg{
    position:absolute;
    right:40px;
    top:40px;
    font-size:28px;
    color:rgba(51,51,51,0.3);
}

jQuery

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

jQuery(document).ready(function ($) {

    //инициализируйте Stellar.js
    $(window).stellar();

    //Кэшируйте несколько переменных
    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');

    //Установите плагин waypoints
    slide.waypoint(function (event, direction) {

        //кэшируйте переменную атрибута data-slide, связанную с каждым слайдом
        dataslide = $(this).attr('data-slide');

        //Если пользователь прокручивает вверх, измените навигационную ссылку, у которой тот же атрибут data-slide, что у слайда, который нужно активировать, и
        //удалите класс active из предыдущей навигационной ссылки
        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        // иначе Если пользователь прокручивает вниз, измените навигационную ссылку, имеющую тот же атрибут data-slide, что у слайда, который нужно активировать, и
        //удалите класс active из следующей навигационной ссылки
        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }

    });

    //waypoints не обнаруживает первый слайд, когда пользователь прокручивает назад кверху, поэтому мы добавляем здесь немного кода, удаляющего класс
    //из навигационной ссылки второго слайда и добавляющего его к навигационной ссылке первого слайда.
    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    //Создайте функцию, которой будет передан номер слайда, и которая затем прокрутит к этому слайду с помощью animate от jquery. Плагин Jquery easing
    // также применяется, поэтому мы передали метод ослабления 'easeInOutQuint', доступный в этом плагине.
    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }

    //При щелчке пользователя по навигационным ссылкам получите значение ссылки атрибута data-slide и передайте эту переменную функции goToByScroll
    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

    // При щелчке пользователя по кнопке получите значение кнопки атрибута data-slide и передайте эту переменную функции goToByScroll
    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);

    });

});

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

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

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

Заключение

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

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

Автор: Aaron Lumsden

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

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

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

Комментарии Facebook:

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

  1. Andrey

    Спасибо за подробный рассказ о столь интересном эффекте. Вот, только… Сайты получаются тяжелые — долго грузятся. Если не знать, что там внутри что-то «вкусненькое», то , как посетитель, давно ушел бы с них, не дождавшись загрузки.

  2. Ринат

    Браузер ФФокс 19
    На демо, когда переходишь с 4 слайда на предыдущий, ссылка в углу не изменяется.
    Слайдер 3 занимает не все пространство — видно начало следующего слайда.

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

    • Андрей Кудлай

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

      • shaman4d

        Так это ваше демо кривое. Откройте и увидите что сладйы не доезжают до своих позиций.

        • Андрей Кудлай

          1) это не наше демо, а переводной статьи, внимательнее посмотрите на адрес в адресной строке
          2) у меня в последних версиях Firefox, Chrome и Opera никаких проблем с демо нет

  3. Владимир

    Как сделать что-бы меню навигации начало отображаться только со второго слайда?

  4. Владимир

    И еще проблема такая. После 7-го слайда, что-бы я не прописывал в css — ничего не работает. Как можно решить данную проблему?

  5. Fidel

    А вы вообще видели как эта дема работает в хроме, опере и сафари??? Там нету никакого скольжения! Всё перемещается рывками и поэтому, вообще говоря, данная конкретная технология в реальной практике просто неприменима — ни один заказчик не согласится с тем, что его сайт нормально выглядит только в FF.

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

    • Андрей Кудлай

      Да, видели. Хром, Опера, FF — все работает плавно.

      • Разочарованный подписчик

        Плавно с рывками, Вы наверное хотели сказать, я также изучил всю статью, следом начал изучать исходник, рывки/подтормаживания/лаги — называйте как хотите, не обрадовали.

  6. Евгений

    Какой-то бред на самом деле если честно, зачем. js ? Причем так много. Гораздо проще сделать на css и быстрее, чем что-то там шаманить. Задал position:fixed; и блок с фоном у нас гуляет и вверх и вниз, хотите еще блоков добавить z-index задали и нет проблем. Зачем то из мухи слона придумали. Не нужно усложнять господа. Все гениальное просто.

  7. Артем

    Может кто-то доступно объяснить назначение опций horizontalOffset и verticalOffset? Читал описание в доках плагина, но так и не понял, что именно эти опции делают.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree