Простая техника эффекта параллакса

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

demosourse

 

Разметка

Данная техника базируется на управлении скоростью перемещения фонового изображения. Создадим разметку HTML, содержащую две секции с атрибутами "data-type" и "data-speed". Назначение атрибутов раскроется чуть позже:

<section id="home" data-type="background" data-speed="10">
</section>
<section id="about" data-type="background" data-speed="10">
</section>

Теги <section> с атрибутами data-type и data-speed позволяют сделать разметку простой и понятной.

В соответствии со спецификацией любые атрибуты, начинающиеся на data- будут обрабатываться как хранилище частных данных. Дополнительно, они не оказывают влияния на шаблон.

Так как нам нужно управлять скоростью прокручивания фоновых изображений, то для ключевых параметров мы будем использовать data-type="background" и data-speed="10".

Затем добавим тег <article> в каждый тег <section>.

<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Абсолютное позиционирование</article>
    </section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простой эффект параллакса</article>
</section>

Мы будем прокручивать фон тега  <section> медленнее, чем его содержание, то есть <article>. Таким образом создается иллюзия параллакса.

 

CSS

Прежде, чем перейти к магии jQuery добавим фоновые изображения для каждого элемента <section> в коде CSS.

#home {
background: url(home.jpg) 50% 0 repeat fixed; min-height: 1000px;
}
#about {
background: url(about.jpg) 50% 0 no-repeat min-height: 1000px;
}

И определим стили для остальных элементов нашей демонстрационной страницы.

#home {
  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
}
#home article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%;
}
#about {
  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%;
}

 

Магический код

Используем jQuery. Начнем со стандартного метода document.ready(), чтобы быть в уверенности о загрузке страницы и ее готовности к манипуляциям.

$(document).ready(function(){
});

Теперь нужно внимание. Первое, что здесь происходит - итерация по всем элементам <section> с атрибутом data-type="background" на странице.

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
      var $bgobj = $(this); // Назначаем объект
    });
});

В функцию .each() добавим другую функцию .scroll(), которая вызывается в момент начала прокрутки.

$(window).scroll(function() {
});

Нужно определить на сколько пользователь прокрутил страницу, и затем разделить полученное значение на  величину, определяемую в атрибуте data-speed.

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$window.scrollTop() - получаем текущее значение прокрутки сверху. $bgobj.data('speed') ссылается на атрибут data-speed в разметке. yPos - окончательное значение, которое используется для прокрутки. Однако, используется отрицательное значение, так как фон смещается в обратном направлении по отношению к прокрутке пользователя.

В нашем примере атрибут data-speed имеет значение 10. Предположим, что окно браузера прокручивается на 57px. Это означает, что 57px делится на 10 = 5.7px.

// Собираем положение фона
var coords = '50% '+ yPos + 'px';
// Смещаем фон
$bgobj.css({ backgroundPosition: coords });

Теперь надо собрать все данные в одно значение. Чтобы сохранить горизонтальное положение фона статичным, мы используем значение 50% для его свойства xPosition. Затем добавляем yPos в качестве значения свойства yPosition, а затем присваиваем координаты фону <section> : $bgobj.css({ backgroundPosition: coords });.

В окончательном виде код будет выглядеть так:

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // Назначаем объект
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));
            // Собираем значение координат фона вместе
            var coords = '50% '+ yPos + 'px';
            // Смещаем фон
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

 

Фиксатор для IE

Остается один момент: старые версии IE не могут вывести теги <section> и <article>. Дело легко поправить, мы будем использовать стандартное решение для создания элементов, которое магическим образом заставит браузер распознавать теги HTML5.

// Создаем элементы для IE
document.createElement("article");
document.createElement("section");

Дополнительно мы используем файл сброса CSS, чтобы все браузеры выводили страницу одинаково.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
Перевел: Сергей Фастунов
Урок создан: 17 Октября 2012
Просмотров: 73667
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^