Logo

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». Si tienes alguna duda déjanosla en un comentario y trataremos de solucionártela lo antes posible.


Checklist auditar web



Comparte:

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

woko creativos, S.L., como responsable del tratamiento, le informa que sus datos son recabados con la finalidad de: Recoger los datos de carácter personal que sean obtenidos a través de los formularios de contacto disponibles en la página web de la empresa para el contacto con el solicitante. La base jurídica para el tratamiento es el consentimiento del interesado. Sus datos no se cederán a terceros salvo obligación legal. Cualquier persona tiene derecho a solicitar el acceso, rectificación, supresión, limitación del tratamiento, oposición o derecho a la portabilidad de sus datos personales, escribiéndonos a la dirección de nuestras oficinas, (Plaza Ibaiondo, 4 -2º oficina 210. 48940-Leioa (Bizkaia)), indicando el derecho que desea ejercer o enviando un correo a: info@woko.agency Puede obtener información adicional en nuestra página web.

Contenidos relacionados