3,2
рейтинг
10 декабря 2012 в 16:45

Разработка → Простая техника Parallax Scrolling tutorial

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

HTML разметка


Создаем два блока с атрибутами "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 используются как ключевые атрибуты при передачи необходимых параметров.


CSS разметка


Добавляем фоновые изображения для элементов с id #home и #about
#home {
background: url(home-bg.jpg) center 0 repeat fixed; min-height: 1200px;
}
#about {
background: url(about-bg.jpg) center 0 no-repeat min-height: 1200px;
}

home-bg.jpg
30efa81c4067e1a308e5bd8b431

about-bg.jpg
Netcribe

Стилизуем сами элементы и их содержимое:
#home {
  background: url(home.jpg) center 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: 300px;
  width: 100%;
}
#about {
  background: url(about.jpg) center 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: 300px;
  width: 100%;
}


JavaScript - jQuery


Перебираем все элементы с атрибутом data-type="background":
$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
      var $bgobj = $(this); // создаем объект
    });
});

Добавляем функцию .scroll() внутри .each(), которая вызывается при скроллинге:
$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
      var $bgobj = $(this); // создаем объект
      $(window).scroll(function() {
      ...   
      });
    });
});

Вычисляем коэффициент изменения позиции фона при скроллинге:
var yPos = -($(window).scrollTop() / $bgobj.data('speed'));

Netcribe

Записываем значение background-position в переменную и присваиваем стили coords:
var coords = 'center '+ yPos + 'px';
$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')); // вычисляем коэффициент 
            // Присваиваем значение background-position
            var coords = 'center '+ yPos + 'px';
            // Создаем эффект Parallax Scrolling
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

Демо

Спасибо всем за внимание.
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (39)

  • +6
    уважаемые веб-разработчики, воздержитесь, пожалуйста, от повсеместного применения этого эффекта. мне от него крышу сносит. спасибо.
    • +9
      Уважаемые веб-разработчики, не воздерживайтесь, пожалуйста, от повсеместного применения этого эффекта. Мне от него крышу не сносит.
      • 0
        Когда скорость скролинга высокая, то у и меня рябит.
        А вот если скорость низкая, то весьма миленько.
        • 0
          Колёсиком когда скролю, то рывками. А когда скроллбар таскаю мышой — то норм, симпатишно так.
    • 0
      Я уже всерьез подумываю о написании плагина, который будет откатывать javascript до версии 1.7.
  • +1
    > $(document).ready(function(){
    Почему я так часто вижу это в чужом коде? Почему не $(function(){ ?!
    • +4
      Уже привычка. $(document).ready() — так в документации jQuery всегда было написано
    • +1
      Так чуть понятнее, что у document случилось ready.
      А то если не знать такой фичи, то не каждый поймет что это за функция, и куда она засунута.
      Почти самодокументирование.
      • 0
        Вы серьезно? давайте тогда писать <script type="text/javascript"></script> в HTML5
      • 0
        Если этого не знать.
        То и понимать не нужно.
        Нужно закрыть IDE и ити копать траншеи
        • 0
          s/IDE/notepad.exe/
        • 0
          То есть вы считаете что хаки и шорткаты, лучше очевидного для любого человека кода?

          Или считаете что сэкономив 16 байт кода вы облегчите страдания JavaScript интерпретатора? ))
          • 0
            Зачем тогда использовать библиотеки? давайте писать на чистом JS, зачем сокращения?
    • 0
      Почему не $(function(){ ?

      я бы сказал даже jQuery(function($){
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Это вам спасибо за ссылочку, Parallax тут шедевральный, сайт — супер, мне самому стало интересно, как сделать подобный эффект. Будет время, постараюсь разобраться, пойму — обязательно поделюсь этим с хабром.
      • 0
        joelb.me/scrollpath/ Наверное, как-то примерное так.
        • 0
          Полезно, добавил в закладки
        • 0
          За распространение таких ссылок я бы приговаривал к 15 суткам программирования на КОБОЛе.
    • 0
      Наркоманство.
    • 0
      Вот ещё отлично: http://www.nike.com/jumpman23/aj2012/
  • 0
    Да красивый эффект, мы на рекламной странице тоже решили простебаться параллаксом
    • 0
      На тормозной видухе — тихий ужас. Особенно депрессивный спецефект при притормаживающем скроллинге создаёт полосатый фон
      • 0
        Полосатый фон — это да, мечта эпилептика. Никак не соберемся от него отказаться.
        • +1
          проблему нашли, взяли и отказались.
    • 0
      Веселенькая у вас рекламная страница.
  • 0
    Все хорошо, но представим, что страница большая, и блоков с параллаксом много, даже на мощных компьютерах все будет тормозить. Как вариант, двигать только то, что попало в видимую часть, или попадет в неё через Npx.
    • 0
      Да, не спорю. Но это именно техника, очень простая для понимания. Даже на начальном уровне знания jQuery опираясь на эту технику можно придумать что нибудь поинтереснее.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Такой эффект на промо-сайтах, целевых страницах уже будет нести практическую пользу, если говорить о маркетинге. А в плане рабочих сайтов и их интерфейсов — это на самом деле вопрос на миллион =) Поскольку Parallax это тренд, я думаю где нибудь появится интересная реализация интерфейса с помощью этого.
  • 0
    Статья полезная. Спасибо!
  • 0
    И сразу вопрос: зачем тут jQuery?
    • 0
      Чтобы сделать еще один запрос :) шутка.
      Думаю что на сайте это не единственный скрипт будет, так что скорее всего это отдельная часть сценария
      • 0
        Меня просто смутило то, что с условием использовании jQuery, демо не работает даже в IE8. Я переделывал сложное паралакс демо из статьи, без jQuery, кода не больше чем в оригинале на jQuery (и мой код проще), работает в IE7+
        • 0
          Нерабочее решение это уже скорее к автору этого решения. А jQuery в проекте скорее всего все равно будет задействовано, так что соблазн воспользоваться им велик. Да и проще читать код, когда все один стилем написано, если конечно кроме этого эффекта там еще куча кода.
        • +1
          В IE не работает из за HTML5 элементов.

          document.createElement(«article»);
          document.createElement(«section»);

          И все будет работать
          • 0
            Да я то в курсе, просто, если не заморачиваться, чтобы код работал в старых браузерах — зачем использовать jQuery? Хотя hermit931 выразил разумную мысль, что если весь проект пишется на jQuery, то и для параллакса лучше использовать jQuery. Но есть же куча библиотек для этого и некоторые из них весьма неплохие.
  • 0
    Только сегодня в рассылке попадалась статья
    Parallax Tools and Techniques

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.