- Метки урока:
- jquery
- изображения
- разное
- web дизайн
Простая техника эффекта параллакса
Эффект параллакса - очень интересная техника. При прокручивании фоновое изображение перемещается медленнее чем, содержание, а в результате получается иллюзия 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, чтобы все браузеры выводили страницу одинаково.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
Перевел: Сергей Фастунов
Урок создан: 17 Октября 2012
Просмотров: 73667
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.