Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Como hacer el efecto Parallax

Hola jóvenes, hoy les quiero mostrar como hacer el efecto parallax. Quizá algunos lo hayan visto pero no lo conocen por su nombre, así que les mostraré primero qué es el efecto parallax.

Efecto Parallax
Consiste en crear un efecto de profundidad entre el fondo y los elementos de un plano (en este caso, los elementos de la página web). Y se aprecia al mover el scroll. Como ejemplo les muestro estos sitios web que usan el efecto parallax.

Cyclemon
Boy Coy
Rimmel London

¿Cómo se hace?
Bueno, la idea es tener un contenedor que ocupe gran parte de la pantalla, sobre todo el 100% del ancho, y en su CSS colocar lo siguiente:
.class {
    background-image: url('imagen.jpg');
    background-attachment: fixed;
}
Luego, colocar un archivo javascript con lo siguiente, teniendo jQuery enlazado al documento HTML.
$(document).ready(function(){
	$(window).scroll(function(){
		var barra = $(window).scrollTop();
		var posicion =  (barra * 0.15); // Jugar con el valor 0.15 a gusto.
		
		$('.class').css({
			'background-position': '0 -' + posicion + 'px'
		});
	});
});
En la línea 6, en $('.class') va el mismo nombre de la clase que tiene el contenedor, que sería la misma clase en el documento CSS.

Esta es una forma sencilla de hacer el efecto, pero si se quiere hacer más, solo hay que jugar moviendo no solo el fondo, sino también los elementos.
1
Puntos
616
Visitas
0
Resp
Por Jose hace 31 meses
Experto Sitio web
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate