Web Parallax Scrolling фоновое изображение и текст

Question

Fiddle выпуска: http://jsfiddle.net/Vy365/3/

Я пытаюсь создать разделы на странице, которые имеют параллакс скроллинга эффект.

Главный CSS, который я использую для достижения этого, - background-attachment: fixed для фонового изображения, и position: fixed для текста в верхней части изображения.

У меня есть несколько div с этим эффектом на странице, и я хочу, чтобы каждая секция прикрывала те, что были перед ним.

HTML:

<section> 
    <div id="parallax-1" class="parallax"> 
     <div class="title"> 
      <h1>Fixed Text 1</h1> 
     </div> 
    </div> 
</section> 

<section class="scrolling-content">Scrolling Content</section> 

<section> 
    <div id="parallax-2" class="parallax"> 
     <div class="title"> 
      <h1>Second Fixed Text</h1> 
     </div> 
    </div> 
</section> 

<section class="scrolling-content">Scrolling Content</section> 

CSS:

.parallax { 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
    width: 100%; 
    max-width: 1920px; 
    height: 200px; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: 50% 0; 
    z-index: 1; 
} 

.parallax .title { 
    position: fixed; 
    top: 80px; 
} 

#parallax-1 { 
    background-image: url(http://placekitten.com/500/200); 
} 

#parallax-2 { 
    background-image: url(http://placekitten.com/500/202); 
} 

.scrolling-content { 
    position: relative; 
    width: 100%; 
    height: 200px; 
    background: #ffffff; 
    z-index: 2; 
} 

Фоновые изображения прикрывают друг друга надлежащим образом, однако фиксированный текст остается фиксированным на странице (еще раз увидеть fiddle).

Есть ли способ исправить это с помощью CSS? Или мне нужно сделать некоторый контроль за прокруткой окна yucky jquery?

Answer 1

Поскольку вы используете jQuery в любом случае, почему бы вам не попробовать подключить как http://stephband.info/jparallax/?

EDIT: Для мобильных приложений вы можете зарегистрироваться Skrollr. Это чистый Javascript, и есть некоторые действительно хорошие примеры в разделе «В дикой природе».

Это может помочь вам вновь изобретать колесо.

Answer 2

Подумайте, вы хотите использовать позицию: абсолютная вместо позиции: фиксируется на классе «.parallax .title»

Answer 3

Вот две обучающие программы (как с использованием Skrollr.js), которые могли бы помочь другим, пытаясь создать подобный эффект прокрутки параллакса.

• How to create a parallax scrolling website
• Simple parallax scrolling tutorial