Awebdesign's Blog

Как сделан сайт Nike Better World с вертикальной параллакс-прокруткой

Posted in Лучшие дизайны мира / Best World Designs by awebdesign on 13.07.2011

(Перевод Виктории Шидловской статьи Richard Shepherd для журнала Smashing Magazine)

Наверное, самый обсуждаемый сайт за последние 12 месяцев – Nike Better World. Он был выставлен на бесчисленных веб-галереях, и до сих пор остается примером выдающейся идеи, умного дизайна и самых последних технических веб-достижений.
В этой статье мы расскажем, как Nike Better World был сделан. Мы подробно рассмотрим, как все работает и используем похожие приемы, чтобы создать наш собственный параллакс-веб-сайт и вдохновить вас на создание других вариаций.

Nike Better World - parallax effect

Nike Better World – это пример того, как Nike помогает пропагандировать спорт по всему миру. Этот сайт нужно обязательно смотреть в браузере, желательно, в браузере последнего поколения, хотя он хорошо «деградирует» и в браузерах более раннего поколения. В браузерах, а не в качестве статичных картинок, его нужно смотреть, потому что он интенсивно использует JavaScript, чтобы создать параллакс-эффект при вертикальной прокрутке.
Только благодаря HTML5 можно было создать такой сайт, и каково бы ни было ваше отношение к Nike – этот сайт – пример выражения любви к бренду. Хотя нет ничего нового в parallax scrolling effects, до них никто еще не сочетал дизайн и техническое воплощение с таким совершенством. В общем, есть чему поучиться.

Донести историю
По нашему мнению, технологии независимы от концепции. Для нас главным было – донести до пользователя историю так, чтобы он почувствовал свою сопричастность.
– Widen+Kennedy

Nike воспользовался своим давним сотрудничеством с Widen+Kennedy (W+K), одним из крупнейших независимых рекламных агентств в мире, чтобы сколотить команду, которая и занялась сайтом Nike Better World: Seth Weisfeld был креативным директором, Ryan Bolls – продюсером, в то время как Ian Coyle и Duane King занимались дизайном и сборкой.

Wieden+Kennedy

Я начал свое интервью с вопроса, было ли отправной точкой создания сайта технология, которую они использовали. Как отображено в цитате выше, они всегда концентрируются в первую очередь на создании концепции. Это здорово, потому что многие из нас сначала много говорят о новых потрясающих технологиях, а потом пытаются «применить» сайт к ним. W+K начинают с противоположного конца – сначала они генерируют идею, а потом воплощают ее, пользуясь теми техническими возможностями, которые доступны.

Итак, после принятия концепции, они сразу решили делать сайт на HTML5, или это решение пришло позже?

У нас были некоторые соображения, которые привели нас к использованию HTML5. Мы знали, что нам нужна версия, которая подходила бы также к мобильным и планшетным устройствам. И нам нравилась мысль сделать только одну версию сайта, которая бы подходила ко всему. HTML5 предлагает идеальный баланс между креативностью и технологичностью, чтобы донести обращение Nike самым неожиданным, захватывающим и неотразимым образом.
— W+K

HTML5 все еще поддерживается не всеми браузерами (читай IE) без JavaScript-уловок, так как именно должен был веб-сайт подходить ко всем браузерам?

Довлеющими факторами были соображения, что сайт должен быть «легким», оптимизированным для веба и для устройств, а также «расширяемым» для будущих инноваций и платформ.
— W+K

Чтобы достичь этого, мы должны были в основном положиться на JavaScript, чтобы добиться интерактивности и эффектов прокрутки. А позже решили создать собственный параллакс-эффект с помощью CSS и jQuery. Для начала же мы решили создать шаблон на HTML.

Начнем с Boilerplate

Необходимо сказать, что Nike Better World – оригинальная работа, которую не следует копировать. Тем не менее, мы можем заглянуть внутрь и поучиться некоторым приемам. Мы также можем взглянуть на другие веб-сайты, которые используют параллакс-эффект на прокрутке и потом собрать нашу собственную страницу, встроив эти эффекты.

Я спросил W+K, начинали они с шаблона или нет.

Мы начали без готового «движка». В определенных случаях, особенно в экспериментальных, это позволяет держать контроль над всем процессом с самого начала.
— W+K

Если вы взглянете на код Nike Better World, то увидите довольно продвинутые JavaScript-ы. Но давайте не будем усложнять и просто положимся на HTML5 Boilerplate в качестве отправной точки.

// Примечание переводчика: Что такое HTML5 Boilerplate?
Это потрясная штука! Результат работы лучших программистов мира. Благодаря Boilerplate можно собирать HTML5 сайты со всеми прибамбасами уже сейчас – она позаботится о кроссбраузерной совместимости (даже с IE6!). Подробнее перевод возможностей здесь.
// Конец примечания

Загрузите HTML5 Boilerplate. Подойдет версия “stripped”. Вы можете удалить некоторые файлы, если уверены, что они вам не понадобятся (crossdomain.xml, test folder, и т.п.).

Как вы можете увидеть в нашем исходном коде (скачай финальный код здесь), страница сделана из 4 секций, все по одному и тому же образцу. Давайте взглянем на одну такую секцию.

<section class="story">
 <div></div>
 <article>
  <h2>Background Only</h2>
  <div>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
 </article>
</section>

Я не уверен, что это наилучший способ применения всех этих HTML5-тэгов, но это то, что мы должны были сделать, чтобы наш эффект работал. По правилам, section имеет heading, так что, по идее, section должен быть div-ом, а article должен быть section. Но, как говорят W+K, HTML5-спецификация все еще молода и открыта для интерпретаций:

HTML5 – еще развивающийся стандарт, особенно в использовании. Много рассуждений мы посвятили семантике. Некоторые наши решения следовали спецификации HTML5 буквально, другие обходили ее. Как и в любой новой технологии, первые, кто применяют ее к реальному миру, на самом деле и формируют ее.
— W+K

Очень свежая интерпретация. Проекты вроде Nike Better World – это возможность проверить развивающийся стандарт и, если уж быть откровенным, обеспечить какой-то отклик на спецификацию.

Вкратце, есть ли какой-то определенный путь переложения теории на практику?

Мы используем тэг article к тем кускам содержимого, которые могут (и должны) быть вместе или по отдельности сгруппированы. Каждая «история» (“story”) – это article. Мы выбрали div-ы, чтобы растянуть основной контент. Наибольшую свободу мы увидели в тэгах section, которые в спецификации прописаны как «главы с содержимым».
— W+K

Кстати, HTML5 Doctor начал серию дебатов Simplequizes по поводу разметки HTML5, которые как раз наглядно иллюстрируют, что редко одно и то же решение удовлетворяет всем проблемам. Полюбопытствуйте.
В style.css мы добавляем background к нашей section (или секции):

section { background: url(../images/slide1a.jpg) 50% 0 no-repeat fixed; }

Мы также должны задать высоту и ширину нашей секции, чтобы фоновые изображения были видимы:

.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }

Я установил высоту всех наших секций в 1000px, но вы можете изменить это значение согласно вашим требованиям. Так же можно менять высоту каждой секции в отдельности, независимо друг от друга.
Мы также должны убедиться, что максимальная ширина нашей секции соответствует максимальной ширине фонового рисунка (1920 пикселей), и задать relative position, чтобы потом задать absolute position ее потомкам (children).
Вот страница БЕЗ добавления JavaScript. Стоит просмотреть код, чтобы увидеть, как мы продублировали секции в HTML и CSS.

Даже только с помощью этого кода мы добились приятного эффекта при скролле. Мы на верном пути.

Атрибут Data в HTML5

Перед тем, как приступить к параллакс-прокрутке необходимо понять новый атрибут data, который интенсивно используется в нашем коде.

В старое доброе время мы записывали всю информацию об элементе в атрибут rel. Например, если нам нужно было сделать доступной информацию о языке для JavaScript, мы ставили следующую маркировку:

<article class='story' id="introduction" rel="en-us"></article>

Иногда сложные DOM-манипуляции требуют больше информации, чем может обеспечить атрибут rel. В недавнем прошлом мы начали сохранять информацию в атрибут class. Только не теперь!

Команда W+K столкнулась с такой же проблемой, и они использовали атрибут data в Nike Better World:

Атрибут data один из самых главных атрибутов в HTML5. Он позволил нам отделить HTML, CSS и JavaScript друг от друга для более ясного кодирования. Веб-сайты, вроде этого, с высоким уровнем интерактивности, содержат большое количество приложений за кулисами, и атрибут data позволяет создавать ясную структуру.

— W+K

Nike Better World how to

Так что же такое атрибут data? Вы можете почитать официальную спецификацию, в которой говорится:

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

— W+K

Другими словами, любой атрибут с префиксом data будет восприниматься как хранилище частной информации; она не будет влиять на разметку, и пользователь ее не увидит. Наш предыдущий пример можно переписать следующим образом:

<article class='story' id="introduction" data-language="en-us"></article>

Еще одна хорошая новость – вы можете использовать более одного атрибута data у каждого элемента, и это именно то, что мы делаем в нашем примере с параллаксом. Наверное, вы уже заметили следующее:

<div data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="2"></div>

Здесь мы храним наши кусочки информации: x и y отступы, скорость, а также указываем тип данных (data-type). После проверки элемента по типу данных на существование в файле с JavaScript мы можем делать с ним все, что угодно.

Parallax-scrolling

На странице три элемента создают параллакс-эффект при прокрутке:

  1. Фон прокручивается на более низкой скорости;
  2. Любые графические элементы прокручиваются немного быстрее фона;
  3. Любая секция с контентом прокручивается с такой же скоростью, как окно (т.е. с нормальной).

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

how to make vertical parallax effect

На всякий случай можно сказать, что нам не придется волноваться насчет прокрутки третьего элемента – браузер сделает это за нас! Поэтому давайте начнем разбирать прокрутку фона.

$(document).ready(function(){
 // Закэшировать окно
 $window = $(window);
// Закэшировать отступ Y и скорость
$('[data-type]').each(function() {
  $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
  $(this).data('speed', $(this).attr('data-speed'));
});
// Для каждого элемента с атрибутом data-type
 $('section[data-type="background"]').each(function(){
  // Сохраняем некоторые переменные с информацией, где мы
  $(this).data('speed', parseInt($(this).attr('data-speed')));
   var $self = $(this),
   offsetCoords = $self.offset(),
   topOffset = offsetCoords.top;
   $(window).scroll(function(){
    // Волшебство будет происходить здесь!
   }); // закрываем функцию прокрутки окна
 }); // закрываем функцию проверки всех с атрибутом data-type
}); // закрываем функцию document ready

Для начала наша обязательная функция document ready, чтобы убедиться, что DOM загрузился и готов к работе. Затем мы кэшируем объект window, к которому будем обращаться довольно часто, и записываем как $window (мне нравится ставить префикс  $ к объектам jQuery, чтобы быстро определять, где объект, а где переменная).

Мы также используем метод jQuery .data, чтобы присвоить Y-отступ (объяснение будет ниже) и скорость прокрутки фона каждого элемента. Опять же, это форма кэширования, которая повысит скорость и читабельность кода.

Далее указываем, что функция будет применяться ко всем элементам с атрибутом data-type="background" следующей строчкой:

$('section[data-type="background"]').each(function(){}

Еще раз мы видим, как пригодился атрибут data при использовании в JavaScript.

Внутри .each function мы можем начинать строить картину того, что должно происходить. Для каждого элемента необходимо объявить кое-какие переменные:

// Сохраняем некоторые переменные с информацией, где мы
var $self = $(this),
    offsetCoords = $self.offset(),
    topOffset = offsetCoords.top;

Кэшируем элемент как $self (повторяем, что используем $ потому что это объект jQuery). Далее сохраняем отступ offset() элемента в переменную offsetCoords и затем сохраняем верхний отступ (top offset), используя свойство .top для offset().

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

Нам нужно также сделать две вещи: проверить, что объект находится в области видимости, и, если да, то прокручивать его. Мы проверяем, в области он видимости или нет, с помощью следующего кода:

// Если эта секция в области видимости
if ( ($.Window.scrollTop() + $.Window.height()) > ($offsetCoords.top) &&
( ($offsetCoords.top + $self.height()) > $.Window.scrollTop() ) ) {
}

Первое условие проверяет, появилась ли верхняя часть элемента в самом низу экрана.

Второе условие проверяет, прошла ли нижняя честь элемента верхнюю границу окна.

Вы бы могли использовать этот метод, чтобы проверять любой элемент на нахождение в области видимости, потому что в таком случае элементы бы «работали», только когда пользователь может видеть их. Это убыстряет работу браузера и всего приложения.

Итак, мы установили, что какая-то часть секции с атрибутом data-type попала в область видимости. Теперь можно прокручивать фон. Трюк в том, чтобы фон прокручивался быстрее или медленнее, чем окно браузера. Именно это создает параллакс-эффект.

Вот код:

// Прокручиваем фон со скоростью var
// yPos имеет отрицательное значение, потому что мы прокручиваем фон ВВЕРХ!
var yPos = -($window.scrollTop() / $self.data('speed'));
// Если у этого элемента есть отступ по Y, то добавить его
if ($self.data('offsetY')) {
  yPos += $self.data('offsetY');
}
// Высчитываем окончательное положение фона
var coords = '50% '+ yPos + 'px';
// Двигаем фон
$self.css({ backgroundPosition: coords });

Y-позиция высчитывается путем деления расстояния, которое пользователь прокрутил от верха окна, на скорость. Чем выше скорость, тем медленнее прокрутка.

Далее мы проверяем, есть ли Y-отступ, чтобы применить его к фону. Расстояние, на которое прокручивается фон, рассчитано относительно расстояния, на которое прокручено само окно. Чем ниже мы на странице, тем дальше прокручен фон. Это может привести к ситуации, когда фон начинает исчезать со страницы, оставляя внизу белый (или какого цвета ваш основной фон) зазор. (Прим. перев.: Чтобы понять, о чем речь, попробуйте открыть сайт Nike Better World в Мозилле и несколько раз нажать CTRL-, чтобы уменьшить масштаб сайта. На определенной стадии вы заметите, как внизу каждой секции или экрана появляется белый зазор).

Чтобы исправить ситуацию, нужно добавить к Y-положению фона отступ, который будет толкать его вниз на несколько сотен пикселей. Единственный способ найти это магическое число – экспериментировать в браузере. Я бы хотел, чтобы существовал более научный метод, но отступ в самом деле зависит от высоты окна браузера, от расстояния, на которое прокручен фон, от высоты ваших секций и высоты фоновых картинок. Возможно, вы бы могли написать какой-нибудь JavaScript, чтобы он просчитывал все это, но для меня это просто убийство. Две минуты экспериментов в Firebug приводят к такому же результату.

Следующая линия кода определяет переменную coords для хранения координат фона. X-положение остается одинаковым – 50%. Это значение мы указали в css, и мы не будем его менять, так как мы не хотим, чтобы элемент сдвигался по горизонтали. Конечно, вы можете изменить это значение, если вы хотите, чтобы фон прокручивался вбок при прокрутке.

И наконец, применяем метод .css, чтобы применить к фону наше новое положение. И вуаля – параллакс-прокрутка!

Код целиком:

$(document).ready(function(){
 // Закэшировать окно
 $window = $(window);
// Закэшировать отступ Y и скорость
$('[data-type]').each(function() {
  $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
  $(this).data('speed', $(this).attr('data-speed'));
});
// Для каждого элемента с атрибутом data-type
 $('section[data-type="background"]').each(function(){
  // Сохраняем некоторые переменные с информацией, где мы
  $(this).data('speed', parseInt($(this).attr('data-speed')));
   var $self = $(this),
   offsetCoords = $self.offset(),
   topOffset = offsetCoords.top;
   $(window).scroll(function(){
// Если объект в области видимости
if ( ($.Window.scrollTop() + $.Window.height()) > ($offsetCoords.top) &&
( ($offsetCoords.top + $self.height()) > $.Window.scrollTop() ) ) {
}
// Прокручиваем фон со скоростью var
// yPos имеет отрицательное значение, потому что мы прокручиваем фон ВВЕРХ!
var yPos = -($window.scrollTop() / $self.data('speed'));
// Если у этого элемента есть отступ по Y, то добавить его
if ($self.data('offsetY')) {
  yPos += $self.data('offsetY');
}
// Высчитываем окончательное положение фона
var coords = '50% '+ yPos + 'px';
// Двигаем фон
$self.css({ backgroundPosition: coords });

   }); // закрываем функцию прокрутки окна
 }); // закрываем функцию проверки всех с атрибутом data-type
}); // закрываем функцию document ready

То, что сейчас сделали мы, немного проще того, что сделали W+K для Nike Better World. Они считают, что параллакс эффект готовит большее испытание:

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

— W+K

W+K также открывают секрет быстродействия сайта:

Ключ к достижению большей скорости – использование родного CSS везде, где только возможно, потому что DOM-манипуляции замедляют рендеринг, особенно в старых браузерах и процессорах.

— W+K

Например, кнопка “More” внизу крутится при наведении мышки, этот эффект достигнут с помощью CSS3. В браузерах, которые не поддерживают трансформации CSS3, назначение кнопки все равно графически очевидно.

CSS3 transformations

Добавление элементов

Конечно, отличительная черта параллакс-эффекта в том, чтобы на странице прокручивалось несколько элементов. Итак, на этот момент у нас два элемента, движущихся с разной скоростью – окно браузера и фон, который движется медленнее благодаря jQuery и CSS-атрибуту background-position. (Прим. перев.: скорость окна браузера – это скорость div-ов, которые ограничивают фоновое изображение сверху и снизу).

Создатели Nike Better World добавили другие элементы с разной скоростью прокрутки, для удобства назовем их sprites (или спрайты).

Код HTML:

<div id=»smashinglogo» data-type=»sprite» data-offsetY=»1200″ data-Xposition=»25%» data-speed=»2″></div>

Добавляем эти элементы перед закрывающими тэгами </article>, чтобы они были ЗА содержимым <article> (т.е. чтобы картинки были ЗА текстом – видно на узких окнах браузера – прим. перев.). Во-первых, присваиваем div-у id, чтобы мы могли к нему обращаться через CSS. Затем используем наш HTML5-атрибут data, чтобы хранить следующие значения:

  • Статус sprite;
  • Y (вертикальный) отступ в 1200 пикселей;
  • X (горизонтальное) положение в процентах;
  • скорость прокрутки.

Мы назначаем горизонтальное положение в процентах, потому что оно должно зависеть от ширины экрана. Если задать абсолютную позицию, то есть шанс, что на узком экране спрайты «уедут» влево или вправо от границ окна.

А теперь по поводу Y-отступа…

Отправная точка

Возможно, это самая трудная для понимания часть кода.

// Пояснение переводчика (в оригинале не очень понятно)

Давайте разберем все по элементам. Если взять экран с фотографиями спортсменов (на сайте Nike Better World) и покрутить вверх-вниз, то вы увидите, что фотография «сверху» движется быстрее нижней. (Если у вас узкий экран, то будет видна только одна фотография, нажмите CTRL-, чтобы уменьшить масштаб страницы).

Нижнее фото является частью фона секции (background-image), а верхняя – спрайтом (просто фото в PNG-формате). Вы знаете, что фон ограничен высотой и шириной div-а, в котором он находится. Вся магия — в разнице движения дива, который ограничивает фоновую картинку сверху и снизу, и скоростью самого фона, которую мы устанавливаем с помощью динамичного присвоения background-position через jQuery. Так вот, спрайты должны двигаться быстрее фона, но медленнее дивов, в которых они также находятся.

// Конец примечания

Благодаря логике JavaScript, спрайт не движется, пока не окажется в поле зрения секция, его содержащая. Как только секция попадает в область видимости, она начинает двигаться с половинной скоростью (половина от скорости окна – прим. перев.). Для спрайта вам нужно знать вертикальную позицию секции, расчет движения, к тому же спрайт должен в начале движения (крутим сверху вниз) находиться в окне видимости выше, чем верхняя граница фона, потому что при бОльшей скорости прокрутки чем у фона, он окажется в нижней части окна (и области видимости) быстрее.

Мы не можем знать, насколько пользователь далеко прокрутил окно, пока секция не появилась в поле зрения. Мы бы могли использовать JavaScript, чтобы рассчитать высоту окна браузера и затем рассчитать положение секции относительно области видимости в этом окне. Но даже сейчас это звучит слишком сложно. Есть более легкий путь.

Мы знаем, как далеко пользователь прокрутил страницу, пока верх секции не встретился с верхом области видимости – пользователь прокрутил Y-отступ данной конкретной секции. Другими словами, пользователь прокрутил высоту верхней секции плюс тот самый Y-отступ, который мы рассчитывали выше.

// Примечание переводчика:

То есть, у нас есть высота каждой секции, но мы не знаем высоту окна браузера пользователя. Но благодаря Y-отступу, который прибавляется к высоте каждой секции, мы знаем, сколько всего пикселей мы прокрутили вниз. А отступ уже может быть, а может не быть, в любом случае, теперь уже независимо от высоты окна браузера, у нас появляется расчетная высота прокрученных секций.

// Конец примечания

Итак, если у нас, к примеру, 4 секции, каждая по 1000 пикселей высотой, и третья секция встретился с верхней границей окна, то по идее, пользователь прокрутил 2000 пикселей, так как это сумма двух верхних секций.

Если мы хотим, чтобы спрайт появился на 200 пикселей от верха родительской секции, вы бы предположили, что общее расстояние по вертикали от верха всей страницы будет 2200 пикселей. Но это не так, потому что у нашего спрайта есть своя скорость, которая рассчитывается с помощью расстояния, на которое прокручена страница.

Предположим, что скорость равна 2, и это половина скорости, на которой движется страница. Когда секция полностью в области видимости, это значит, что окно прокручено на 2000 пикселей. Но так как фон движется в два раза медленнее, то он прошел расстояние в 1000 пикселей. Если мы хотим, чтобы спрайт появился на 200 пикселей от верха окна, то мы должны прибавить 200 к 1000 пикселям, получаем общий отступ спрайта 1200 пикселей. В JavaScript-е это значение инвертируется в отрицательное (-1200) потому что мы толкаем background-position вниз от низа страницы (по-моему, потому же, почему и при прокрутке фона – потому что мы крутим спрайт ВВЕРХ – прим. перев.).

Вот набросок:

Это один из тех случаев, когда легче все понять, глядя на код и на страницу в действии.

JavaScript выглядит так:

// Check for other sprites in this section

$(‘[data-type=»sprite»]’, $self).each(function() {

// Cache the sprite

$sprite = $(this);

// Use the same calculation to work out how far to scroll the sprite

var yPos = -($.Window.scrollTop() / $sprite.data(‘speed’));

var coords = $sprite.data(‘Xposition’) + ‘ ‘ + (yPos + $sprite.data(‘offsetY’)) + ‘px’;

$sprite.css({ backgroundPosition: coords });

}); // sprites

// Длинное примечание перводчика:

Дело в том, что автор статьи Richard Shepherd для наглядности и для этой статьи сделал свой сайт с параллакс-эффектом. До этого вы посмотрели сборку без ява-скриптов, готовый вариант можно скачать с GitHub и запустить на своем компьютере.

Вы сразу увидите, что параллакс-эффект Ричарда Шеферда совсем не такой крутой, как на Nike Better World, разница налицо – его спрайты (секции с текстом) прокручиваются с такой же скоростью, как фоновые изображения. W+K поступили совсем по-другому. Структура каждой секции такая:

  1. Есть большой блок (section) с фоном, который движется;
  2. Внутри section находится article с заголовком, текстом и пр.;
  3. До того, как кончается section, вставляем пустой блок <div class=»bg»></div>, который содержит свое фоновое изображение.
  4. То есть основной section содержит, к примеру, фон с изображением одной фотографии спортсмена, а div внутри section содержит вторую фотку спортсмена. Первое фоновое изображение движется с одной скоростью (медленнее, чем окно браузера), а второе – с другой. Вот и выходит три элемента с разной скоростью: скорость окна (а значит, div-а section, который все содержит), скорость фона и скорость фона внутри div-а класса bg. Благодаря тому, что «пустой» div со своим фоном находится внутри section, нам не нужно волноваться, где он находится относительно ВСЕЙ страницы, мы располагаем его относительно section (уже в тысячу раз проще расчетов автора статьи положения спрайтов). К тому же, как только этот div попадает вне область видимости, он просто маскируется границами section. Да! Сам article крутится со скоростью браузера, то есть, с нормальной, а article – это заголовки, тексты и ссылки. Маскируются точно также.

Вот как выглядит html:

<section class="story" id="story-freext" data-controller="StoryFreeXT"  data-scrolloffset="100"  data-nav="Nike Free TR Fit">

<article>

<header data-omniture="Nike-Free-XT">

<h2>One shoe does good,<div id="sp"></div> the other shoe kicks ass.</h2>

<h1>Nike Free TR Fit</h1>

<p>The Free TR Fit is designed with a lower environmental impact using <a href="http://www.nike.com/nikeos/p/gamechangers/en_US/cd_environment" data-omniturelink="true" data-target="_blank">environmentally preferred rubber</a>, water-based cementing and recycled polyester. That means every step in the multi-directional flex groove outsole replicates the foot's natural movement and helps women get more out of their workout without leaving a huge environmental footprint. Everyone's a winner.</p>

<a href="http://www.nike.com/nikeos/p/gamechangers/en_US/cd_how_it_works" data-omniturelink="true" data-target="_blank" class="outlink">Learn more</a>    </header>

</article>

<!--article-->

<div class="bg"></div> <!-- ВОТ БЛОК С ПРОКРУТКОЙ ВТОРОЙ КАРТИНКИ! -->

</section><!--story-->

Код CSS:

/* @Free */

#story-freext {

width: 100%;

background: url(../images/bg_freext.jpg) 0 0 no-repeat fixed;

margin: 0;

height: 1600px;

overflow: hidden;

}

#story-freext header {

top: 200px;

}

#story-freext .bg {

position: absolute;

width: 1600px;

height: 1600px;

top: 0;

left: 100px;

background: url(../images/fg_freext.png) 0 0 no-repeat fixed;

}

// Окончание примечания переводчика

HTML5 Video

Некоторые критиковали Nike Better World за то, что те не использовали HTML5 видео. HTML5 все еще не поддерживается всеми браузерами (я смотрю на тебя, Internet Explorer), но для этой статьи я включил HTML5 видео, с помощью любимых товарищей из Vimeo и Yum Yum London.

Мы не можем расположить видео, как фон, поэтому перед нами новый вызов – как расположить и прокручивать его в виде очередного спрайта?

У нас есть три пути:

  1. Мы могли бы изменить его margin-top  относительно родительской секции;
  2. Можно сделать его элементом с position: absolute и изменить значение top, когда родительская секция придет в область видимости;
  3. Можно сделать его элементом с position: fixed а свойство top сделать относительным (relative) области видимости;

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

Вот HTML, который я поставил сразу после закрывающего тэга </article> .

<video controls width="480" width="320" data-type="video" data-offsetY="2500" data-speed="1.5">

<source src="video/parallelparking.theora.ogv" type="video/ogg" />

<source src="video/parallelparking.mp4" type="video/mp4" />

<source src="video/parallelparking.webm" type="video/webm" />

</video>

Открываем тэг HTML5 video и определяем его высоту и ширину. Атрибутом data указываем тип video, Y-отступ и скорость, с которой элемент будет прокручиваться. Так как мы указали для него position: fixed, то он будет прокручиваться поверх остальных эелементов на странице. Вы не сможете угодить всем разрешениям экрана, но поэкспериментировав можете найти оптимальное положение на экране.

CSS для video выглядит так:

video { position: fixed; left: 50%; z-index: 1;}

Я спозиционировал видео на 50% от левого края экрана, чтобы оно двигалось относительно ширины окна. Также указал z-index: 1, чтобы избежать проблем рендеринга с соседними элементами.

Переходим к JavaScript:

// Check for any Videos that need scrolling

$('[data-type="video"]', $self).each(function() {

// Cache the sprite

$video = $(this);

// Use the same calculation to work out how far to scroll the sprite

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

var coords = (yPos + $video.data('offsetY')) + 'px';

$video.css({ top: coords });

}); // video

Вот и все! Параллакс-эффект для HTML5 video!

комментария 4

Subscribe to comments with RSS.

  1. HotIce said, on 14.07.2011 at 10:31 дп

    Понятно? Для меня, где-то так: скрипты даже не смотрел, потому что мало того что я с ними второй день как столкнулся, так и без практики не вижу смысла полностью въезжать в код. Меня интересовал сам подход к техническому воплощению такой идеи. Сама идея очень хорошая. Но мне визуальная реализация не совсем нравится местами. Поэтому записал себе в блокнотик ее продолжение, что бы я сделал не так, и как я вижу для себя реализацию, основанную на таком подходе. Ну и самое главное, это видеть, что подобное возможно.
    По поводу ставить или не ставить код, не подскажу. Время то ваше потрачено. Тому кто захочет это повторить, препятствий не много: время и желание достаточно. Статья подсказывает подход, код же часто ведет к появлению клона. В первом случае мы получаем разнообразие в решениях, во втором мы получаем.. Ну даж не знаю что. Череду одного и того-же.
    Авторских? Хм. Тут опыта нет. Что считать плагиатом, в данном случае.

    Нравится

  2. HotIce said, on 14.07.2011 at 12:59 дп

    У вас эта глава дважды появилась. Атрибут Data в HTML5
    Да, не скучные задачи решают люди. Совсем нескучные.

    Нравится

    • awebdesign said, on 14.07.2011 at 7:57 дп

      Спасибо, что сказали! Поправила. А вообще хоть что-то понятно? На самом деле расчекрыжила сайт Найка, собрала то же самое со своими экранами, но в последний момент передумала ставить, думаю, начнется повальное изготовление сайтов а-ля Найк. Ну, любой может расчекрыжить, но когда с нуля делаешь — хоть какое-то препятствия, лень, например🙂. А тут еще можно собрать и сказать несведущему клиенту «Это я так крут!» Или стоит выложить? Все-таки по исходному коду сразу все понятно, лучше, чем по статье. И как насчет авторских — посадят еще…

      Нравится


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: