Sfondo a scorrimento lento in Javascript o CSS?

Question

Sto cercando di capire come rendere più lento lo scorrimento dell'immagine di sfondo rispetto al contenuto della pagina. Non ho idea di come sia fatto. L'esempio perfetto di ciò che sto cercando di fare is here

Questo è fatto in CSS o jQuery/Javascript?

Answer 1

Ciò è reso da JavaScript (jQuery):

(function() { 
    var a = document.body, 
     e = document.documentElement; 
    $(window).unbind("scroll").scroll(function() { 
     a.style.backgroundPosition = "0px " + -(Math.max(e.scrollTop, a.scrollTop)/8) + "px"; 
    }); 
})(); 

Answer 2

L'effetto sul link che hai postato è fatto in JavaScript utilizzando jQuery.

Se si esamina il codice di uno script del sito here, si possono trovare:

.style.backgroundPosition="0px "+-(Math.max(e.scrollTop,a.scrollTop)/8)+"px" 

In pratica, la proprietà background-position CSS viene modificata a pagina scorrimento calcolo Y a seconda della posizione della pagina di scorrimento . Se hai una certa conoscenza di Javascript, jQuery o Mootools, puoi riprodurre l'effetto molto facilmente.

Penso che sia impossibile farlo utilizzando solo CSS.

Answer 3

Questo funziona per immagini di alta bg.

(function() { 
     var body = document.body, 
       e = document.documentElement, 
       scrollPercent; 
     $(window).unbind("scroll").scroll(function() { 
      scrollPercent = 100 * $(window).scrollTop()/($(document).height() - $(window).height()); 
      body.style.backgroundPosition = "0px " + scrollPercent + "%"; 
     }); 
})();