Parallax Scrolling

Question

Может ли кто-нибудь указать мне в правильном направлении? У меня есть DIV с фиксированным фоном, но я бы хотел, чтобы он прокручивался медленнее при прокрутке страницы. Я не очень хорошо разбираюсь в jQuery или CSS3, поэтому прошу помочь.

Заранее спасибо.

Answer 1

Это может помочь: http://stephband.info/jparallax/ Это превращает узлы в абсолютно позиционируемых слоев, которые перемещаются в ответ на мышь.

Answer 2

Существует множество учебных пособий по сети относительно эффекта параллакса. Здесь площадь две просто формируют простой поиск Google для «параллакс эффект учебник»:

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://richardshepherd.com/smashing/parallax/

http://stephband.info/jparallax/

Answer 3

window.onscroll = function(e) 
{ 
    var val = document.body.scrollTop/your_scroll_factor; 
    document.getElementById('your_background_image').style.posTop = -val; 
} 

Answer 4

http://potentpages.com/parallax-scroll-tutorial/

Вот учебник, что моя компания и я создал описывающее, как сделать веб-страницы, как вы говорите. Он не требует jQuery или расширенного CSS.

Существует множество библиотек и руководств по созданию сайтов параллакса. Мы перечислили некоторые здесь:

http://potentpages.com/parallax-tutorials/

Соответствующий браузер: «обычной скорости скроллинга»

var topDiv = document.getElementById("topDiv"); 
var speed = 1.5; 

window.onscroll = function() 
{ 
    var yOffset = window.pageYOffset; 
    topDiv.style.backgroundPosition = "0px "+ (yOffset/speed) + "px"; 
} 

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