Эффект параллакса - очень интересная техника. При прокручивании фоновое изображение перемещается медленнее чем, содержание, а в результате получается иллюзия 3D пространства. В данном уроке мы продемонстрируем простой и эффективный способ получить замечательный эффект.
Разметка
Данная техника базируется на управлении скоростью перемещения фонового изображения. Создадим разметку 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, чтобы все браузеры выводили страницу одинаково.