Fondo de desplazamiento lento en Javascript o CSS?

Question

Estoy intentando averiguar cómo hacer que una imagen de fondo se desplace más lentamente que el contenido de la página. No tengo ni idea de cómo se hace. El ejemplo perfecto de lo que intento hacer is here

¿Esto se hace en CSS o jQuery/Javascript?

Answer 1

Esto se hace mediante 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

El efecto sobre el enlace que envió se realiza en Javascript con jQuery.

Si examina el código de un script del sitio here, se puede encontrar:

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

Prácticamente, la propiedad background-position CSS se modifica en la página de desplazamiento para calcular el eje Y dependiendo de la posición página de desplazamiento . Si tiene algún conocimiento de Javascript, jQuery o Mootools, puede reproducir el efecto muy fácilmente.

Creo que es imposible hacerlo solo con CSS.

Answer 3

Éste funciona para imágenes de alto 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 + "%"; 
     }); 
})();