Хабрахабр: Web-разработка / Блог / Захабренные Голосов: 1 Адрес блога: http://habrahabr.ru/blog/webdev/ Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL

Простая техника Parallax Scrolling

2012-12-10 16:45:44 (читать в оригинале)

Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

HTML разметка

Создаем два блока <section> с атрибутами "data-type" и "data-speed":

<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>

Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.

Читать дальше →