Lecaw

Учимся создавать Web-сайты

Эффект параллакса при помощи Stellar.js

June 14, 2012 677hits

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

 ДЕМОИсходные файлы

 

 

 

Введение

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

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

Пара…Что?

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

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

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

Примеры параллакса

Посмотрите на некоторые примеры которые демонстрируют эффект параллакса

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

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

Наша структура папок:

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

Stellar.js

Чтобы помочь мне достичь этого эффекта, я использую jQuery плагин Stellar.js от Mark Dalgleish, который упрощает саздание сайтов с  прокруткой параллакса. Есть другие плагины, которые помогают сделать это, которые я перечислил в конце этой статьи.

Waypoints

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

jQuery Easing

Query - плагин от GSGD, который предлагает усовершенствованные опции упрощения. Мы будем использовать это, чтобы добавить хорошее перемещение при переходе от слайда к слайду.

HTML разметка

Начнем с нашего index.html, мы добавляем HTML5 doctype и затем создаем главный раздел. Он состоит из CSS, сопровождаемый нашей таблицей стилей ‘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="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>

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

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

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

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

На слайде три и четыре мы также добавляем некоторые изображения к “slide”. Эти изображения дадут реальное понимание эффекта параллакса, который мы создаем. Мы добавляем их в div с классом ‘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 кода. Он в основном добавляет несколько основных элементов, большинство для того, чтобы расположить некоторые изображения.

Первая вещь, которую мы должны сделать с нашим CSS, добавить шрифт BEBAS, использующий @font-face. Тогда добавим его к HTML, чтобы установить шрифт для всего сайта. Мы также устанавливаем ширину и высоту 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- только, чтобы сохранить код коротким, но полный исходный код, который может быть загружен выше, содержит все основные префиксы.

Состояние наведения также использует те же свойства в качестве 'активного' класса; в основном просто увеличение размера шрифта и ширины. 'Активный' класс используется 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 добавим некоторые стили расположения только, чтобы удостовериться, что он остается по центру экрана.

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

Теперь мы переходим к моделированию фактических слайдов. Мы дадим им, свойство background-attachment со значением fixed. Для этого примера использовали обои Philipp Seiffert, которые можно загрузить здесь. Мы устанавливаем относительную позицию для слайдов.

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

.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). Этот селектор может быть описан как:

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

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

/******************************
 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’. Это устанавливает фоновое изображение, чтобы покрыть все окно браузера и изменит его размеры в случае изменения размеров браузера. Мы также добавили небольшой текст на последнем слайде.

/******************************
 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(document).ready(function ($) {
 
    //initialise Stellar.js
    $(window).stellar();
 
    //Cache some variables
    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');
 
    //Setup waypoints plugin
    slide.waypoint(function (event, direction) {
 
        //cache the variable of the data-slide attribute associated with each slide
        dataslide = $(this).attr('data-slide');
 
        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
        //remove the active class from the previous navigation link
        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
        //remove the active class from the next navigation link
        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }
 
    });
 
    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
    //from navigation link slide 2 and adds it to navigation link slide 1.
    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });
 
    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }
 
    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });
 
    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
 
    });
 
});

Несколько точек

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

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

Дополнительные ресурсы

ДЕМОИсходные файлы

Дополнительная информация

RATTING:
(0 голосов)

Медиа