Управление движением текста на веб-сайте параллакса?

Question

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

Есть ли способ контролировать текст, не делая его изображение? Под контролем я имею в виду зафиксировать его на месте, пока движутся изображения параллакса? Без фиксированного позиционирования он просто пролетает мимо изображений, идущих со скоростью страницы по умолчанию, которая быстрее, чем параллакс.

Я играл с позицией: фиксированный и z-index - который работает до точки: http://jsfiddle.net/bf8Zh/1/. Проблема в том, что все, что все идет немного неправильно, дальше по страницам, которые вы идете, перекрывается и т. Д.

Приведенный выше пример jsfiddle является примером использования фиксированного/z-индекса, чтобы попытаться обойти проблему.

Пример CSS:

#intro, 
#two, 
#three, 
#four {width: 100%; margin: 0 auto; height: 800px; overflow: hidden; background-position: 50% 50% !important;} 

#intro {background:url(../img/bg_1.jpg) 50% 50% no-repeat fixed #000;} 
#two {background:url(../img/bg_7.jpg) 50% 50% no-repeat fixed; z-index: 25; position: relative;} 
#three {background:url(../img/bg_8.jpg) 50% 50% no-repeat fixed #ccc; z-index: 9999; position:relative} 
#four {background:url(../img/bg_7.jpg) 50% 50% no-repeat fixed;} 

#two .content {width: 300px; margin: 300px 0 0 200px; float: left; z-index: 50; position: fixed; top: 0; left: 0} 
#two .content .sectionTitle {font-size: 36px; margin: 10px 0; z-index: 50;} 
#two .content .sectionText {font-size: 12px; margin: 10px 0; z-index: 50;} 
#two .content .sectionTags {font-size: 12px; margin: 10px 0; z-index: 50;} 

#three .content {width: 300px; margin: 300px 200px 0 0; float: right; z-index: 100;} 
#three .content .sectionTitle {font-size: 36px; margin: 10px 0; z-index: 100;} 
#three .content .sectionText {font-size: 12px; margin: 10px 0; z-index: 100;} 
#three .content .sectionTags {font-size: 12px; margin: 10px 0; z-index: 100;} 

Answer 1

раствор, что похоже на работу, использует JQuery INview плагина - http://remysharp.com/downloads/jquery.inview.js

$('#seven, #three').bind('inview', function (event, visible) { 
     if (visible == true) { 
      $(this).addClass("active"); 
     }else{ 
      $(this).removeClass("active"); 
     } 
    }); 

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

#three {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 800;} 
#three.active {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 850;} 

Answer 2

Есть ли способ контролировать скорость текста, а также, не делая это изображение?

Вы можете анимировать текст на любой скорости, которая вам нравится. Ваша скрипка не работает для меня (просто черный кадр для вывода), но вот основные:

jQuery(function($) { 

    $("button").click(function() { 
    $("#sometext").animate({ 
      left: "+500" 
     }, 
     500 // This is the duration, in milliseconds 
    ); 
    }); 
}); 

Вы можете поставить продолжительность анимации должна принять к функции animate.

Live example | source - Пример изменяется время от 250мса через 750ms