¿Cómo hacer un efecto parallax en tu web?

Escrito por

Si te gustaron los efectos de las webs de las que hablábamos en el artículo «20 diseños Parallax de impacto», ahora vamos a explicarte cómo insertarlos en tu web de forma sencilla usando Jquery.

Para empezar, debes cargar las librerías de Jquery en tu web. Puedes hacerlo descargando dichas librerías en tu proyecto web o bien cargándolas directamente desde Google con este sencillo código que debes insertar en tu web.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Ahora necesitaremos dos imágenes, una para el fondo y otra para el frente. Posteriormente, debes insertar este código en tu hoja de estilo, editando la ubicación de la imagen de fondo y de frente.

/* ---------------- Parallax ------------------- */
#parallax-back {
	background: transparent url([dirección_a_la_imagen_de_fondo]) repeat top left;
	position: absolute;
	height: 500px;
	width: 100%;
	z-index: 1;
}
#parallax-front {
	position: relative;
	background: transparent url([dirección_a_la_imagen_de_frente]) repeat top left;
	z-index: 1000;
}

y este código en un archivo .js de tu proyecto.

/* Parallax */
/* 
parallax -> Nunca debe ser 1 ya que entonces el fondo y el frente iran a la misma velocidad. 
Si es mayor de 1 el frente irá más deprisa que el fondo. 
Si es menor de 1 el fondo irá más deprisa que el frente. 
*/
var parallax  = 3;
$(document).ready(function () {
	$(document).scroll(function () {

		s = $(document).scrollTop();
		/* Efecto parallax */
		$(document).scroll(function () {
			s = $(document).scrollTop();
			$("#parallax-back").css("top", Math.round(s/parallax)  + "px");
			var newheight =  parseInt($("#parallax-front").css
("height").replace("px","")) - Math.round(s/3);	
			$("#parallax-back").css("height", newheight + "px" );
		})

	})
})

Ahora, lo único que tienes que hacer es meter dos capas nuevas en tu código html.

Y recuerda que el contenido de vuestra web debe ir dentro de la capa «parallax-front». Aquí tenéis el ejemplo funcional del efecto parallax como guía. Si tienes alguna duda déjanosla en un comentario y trataremos de solucionártela lo antes posible.


Checklist auditar web



Opinión de los usuarios:

¿Te ha gustado el artículo?

Suscríbete a la newsletter y recibe cada semana los contenidos en tu email.


Contenidos relacionados

Utilizamos cookies para ofrecer a nuestras visitas una experiencia transparente y cómoda a la hora de navegar por nuestra página web. Al utilizar nuestra página web acepta el uso de cookies; puede obtener más información sobre las cookies y su uso en nuestra web en la sección. Saber más.
¿Necesitas ayuda?