Эффект parallax jQuery на Stellar.js

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

Сложность

css параллакс

Введение

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

Когда прокрутка объединена с функциональностью веб-сайта, этот эффект может оказать сильное визуальное влияние.

Разбор полетов

Давайте разберемся что такое эффект parallax jQuery? Это один из вопросов, которые клиенты задают разработчикам, когда они вслепую говорят “Я требую свой сайт на HTML5″. Каждый раз, когда клиенты просят у меня “HTML5″ сайт, я должен спросить их, как они интерпретируют значение HTML5 – в настоящее время это просто умное слово, которое клиенты продолжают говорить мне, действительно не понимая то, что оно означает.

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

Фактическое слово параллакс получено от греческого παραλλαξη (parallaxis), что означает изменение. У объектов, которые ближе к глазу, есть больший параллакс, чем объекты, которые являются на расстоянии. Это означает, что для человеческого глаза, объекты которые находятся ближе к нам, могут казаться, что перемещаются быстрее, чем объекты на фоне.

Примеры parallax jQuery

Взгляните на некоторые примеры которые демонстрируют эффект параллакса

 

 

 

 

 

 

 

 

 

 

 

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

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

Структура папок:

Используемые плагины

Stellar.js

Для достижения этого эффекта, мы будем использовать jQuery плагин Stellar.js, который упрощает создание сайтов с прокруткой parallax jQuery. Существует множество других плагинов, которые помогают сделать достичь данного эффекта, некоторые из них, я перечислил в конце этой статьи.

Waypoints

Я также буду использовать jQuery waypoints. Waypoints - выполняет определенные функции при прокрутке элемента. Это позволяет выделиться навигации на сайте.

jQuery Easing

Мы будем использовать его, для создания эффектных переходов от слайда к сладу.

HTML разметка

Здесь мы добавим все необходимые для работы файлы стилей и библиотеки

<!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="http://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>

Слайды

Все четыре слайда используют одинаковую разметку:

<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, который будет использоваться в качестве общего стиля для всех слайдов. Каждому слайду зададим идентификатор slide, сопровождаемый номером слайда т.е. Slide1 и т.д. Мы используем атрибут HTML5 data и назовем его data-slide.Также добавим ещё один data атрибут data-stellar-background-ratio. Он необходим для работы jQuery плагина stellar.js, этот плагин устанавливает настройки скорости прокрутки элемента.

Параметр 0.5 - половина стандартной скорости, 1 стандартная скорость, 2 прокрутка на удвоенной скорости.

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

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

На слайде номер три и четыре, добавим изображения к элементу slide. Эти изображения реализуют эффекта параллакса jQuery. Изображения будут находиться в контейнере с классом wrapper, который расположен по центру, шириной в 960px.

Для каждого изображения добавили атрибут data-stellar-ratio.

<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 кода. В основном, используем для расположения элементов на странице.

Для начала, добавим шрифт BEBAS, используя @font-face. Также зададим ширину и высоту HTML к 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%;
}

Навигация

Зафиксируем навигацию в углу страницы. Добавим отступ в 20px сверху, установим z-index равный 1, для того, чтобы меню находилось на верхнем слое.

Неупорядоченный список - просто текст с рамкой в нижней части в качестве подчеркивания. Небольшой переход для анимации наведения курсора. Ниже указан только один префикс -webkit-, необходимо использовать все префиксы, для корректной работы в современных браузерах (полный код вы можете скачать по ссылке внизу статьи).

При наведении, просто увеличивается размера шрифта и ширина элемента.

.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;
}

Разместим логотип по центру экрана.

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

Для всех слайдов, зададим свойство background-attachment со значением fixed.

Добавим тень для художественного оформления.

.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. Для второго слайда, также задали цвет фона, ещё он имеет изображение, мы можем добавить его для любого слайда при помощи селектора nth-child(n):

Этот псевдо-класс соотносит элементы на основе их позиций в списке дочерних элементов.

/******************************
 Слайд 1
*******************************/
#slide1{
    background-color:#5c9900;
 
}
/******************************
 Слайд 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;
}
/****************************** Слайд 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;
}

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

/******************************
 Слайд 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(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');
 
        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }
 
    });
 
    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });
 
    //Функция передает номер слайда, затем прокрутится к этому слайду, использую jQuery анимацю
    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }
 
    //При нажатии на меню, получение атрибута data-slide attribute и передача переменной в функцию goToByScroll
    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });
 
    //При нажатии на кнопку, получение атрибута data-slide attribute и передача переменной в функцию goToByScroll
    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
 
    });
 
});

на втором слайде у нас есть 3D пузыри К некоторым из них я добавил небольшую размытость по гауссу. Объединение фона с резко фокусируемыми пузырями добавляет ощущение глубины параллакса.

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

Перевод статьи Create a Parallax Scrolling Website Using Stellar.js

Тэги: sliderparallaxpluginstellar.js

Вход

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