HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

fuente: http://www.falconmasters.com/web-design/efecto-parallax-sencillo/

Por aqui os dejo el javascript (necesita cargar libreria jquery)


$(document).ready(function(){
$(window).scroll(function(){
var barra = $(window).scrollTop();
var posicion = (barra * 0.80);
$('#paralax').css({'background-position': '0 -' + posicion + 'px'});
});
});

y este sera nuestro DIV


<div id="paralax" style="background-image: url(img/banner-2.jpg);background-repeat:repeat;background-attachment: fixed;height: 565px;width: 100%;background-size: cover;background-position:center;"></div>
});

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s