Vous êtes sur la page 1sur 1

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 pgina.
1 <div class="pagina parallax" data-movimiento="10"></div>
2 <div class="pagina parallax" data-movimiento="10"></div>
3 <div class="pagina parallax" data-movimiento="10"></div>
.pagina {
width: 100%;
height: 600px;
1
background-repeat: no-repeat;
2
background-position: 50% 0;
3
background-size: cover;
4
background-attachment: fixed;
5 }
6 .pagina:nth-child(1) { background-image:
7 url(http://31.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsM
8 k41st5lhmo1_1280.jpg); }
9 .pagina:nth-child(2) { background-image:
10 url(http://38.media.tumblr.com/63748da1fab7ccebe70355807587d659/tumblr_n6rz5eNB
11 G51st5lhmo1_1280.jpg); }
.pagina:nth-child(3) { background-image:
url(http://38.media.tumblr.com/ddcaa618d51897a5263bd106bf573917/tumblr_n6esribU
971st5lhmo1_1280.jpg); }

Y por ltimo el cdigo jQuery, donde utilizamos el mtodo scroll() para controlar el
desplazamiento vertical y poder asignar la nueva posicin vertical en % por css:
1 $(document).ready(function(){
2
$pantalla = $(window);
3
$('.parallax').each(function(){
4
var $this = $(this);
5
$pantalla.scroll(function() {
6
var y = -($pantalla.scrollTop() / $this.data('movimiento'));
7
var xy = '50% '+ y + 'px';
8
$this.css({ backgroundPosition: xy });
9
});
10 });
11 });
Con este cdigo ya podis personalizarlo a vuestro gusto en estilo y
velocidad de movimiento vertical.