jQuery: crear efecto parallax

Un sencillo mini-tutorial para crear un efecto parallax a pelo con jQuery, sin utilizar plugins.

Primero crearemos una clase css (en este caso «parallax») para los elementos que queremos crear el efecto, junto con un atributo data que he llamado «movimiento» para poder personalizar la velocidad de cada uno, por si tenemos varios en la misma página.

<div class="pagina parallax" data-movimiento="10"></div>
<div class="pagina parallax" data-movimiento="10"></div>
<div class="pagina parallax" data-movimiento="10"></div>

.pagina {
    width: 100%;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    background-attachment: fixed;
}
.pagina:nth-child(1) { background-image: url(http://31.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsMk41st5lhmo1_1280.jpg); }
.pagina:nth-child(2) { background-image: url(http://38.media.tumblr.com/63748da1fab7ccebe70355807587d659/tumblr_n6rz5eNBG51st5lhmo1_1280.jpg); }
.pagina:nth-child(3) { background-image: url(http://38.media.tumblr.com/ddcaa618d51897a5263bd106bf573917/tumblr_n6esribU971st5lhmo1_1280.jpg); }

Y por último el código jQuery, donde utilizamos el método scroll() para controlar el desplazamiento vertical y poder asignar la nueva posición vertical en % por css:

$(document).ready(function(){
    $pantalla = $(window);
    $('.parallax').each(function(){
        var $this = $(this);
        $pantalla.scroll(function() {
            var y = -($pantalla.scrollTop() / $this.data('movimiento')); 
            var xy = '50% '+ y + 'px';
            $this.css({ backgroundPosition: xy });
       });
    });
});

Con este código ya podéis personalizarlo a vuestro gusto en estilo y velocidad de movimiento vertical.

[demo]