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

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

Por Jorge Monclús | 26 junio, 2013

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.

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



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

Valora este artículo

Desarrollo web, Diseño web

¿Te ha gustado el artículo?

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

Comentarios

  • cristian dice

    ¿Si deseo agregar más imágenes que vayan apareciendo al mover el scroll, cómo debo hacerlo?

    PD: Gracias por la info, muy útil y no es tan complicado como lo imaginaba.

  • cristian dice

    Sabes qué no me funciona a menos que ponga style=”min-height: 2000px;” en el parallax-front. Deberás corregir esto por que si no no funcionará.

  • Editor dice

    @cristian Ese style=”min-height: 2000px;” es simular que hay contenido. De normal la web tendrá unas imágenes y unos textos que harán que esa capa llamada parallax-front tenga la altura suficiente para que se vea el efecto.

  • vic dice

    Hola,
    Me funciona genial, gracias.
    Una preguntilla: Que habría que hacer para que el se moviera en sentido inverso al ??
    Es decir, que si tengo unas nubes como imagen de fondo del div “parallax-back” y un edificio como imagen de fondo del div “parallax-front” que el efecto sea que las nubes bajen y el edificio suba, no como ahora que todo sube. Plis puedes poner como sería el código .js en este caso??

    Muchísimas gracias.

  • vic dice

    Genial!! sería la leche si se pudieran invertir las direcciones del efecto (que el que subE baje y el que baja suba) MIL GRACIAS!!!

    • Editor dice

      A ver si esto es lo que buscabas Si cambias el valor de "background-position", "0px "+(Math.round(s/[VALOR])+50) + "px" subira o bajara más deprisa. Si quieres que suba debe ser menor que 1 y si queires que baje mayor que 1

  • iris dice

    Hola! no entendi una parte del codigo donde explicas que debe ser mayor o menor que uno…ese efecto donde deberia colocarlo dentro del codigo? te comento..nunca trabaje con jquery ni esto de parallax..soy nuevita en el tema y quisiera aprender un poco mas.agradezco tu atencion.un beso

  • Roberto dice

    Hola, esta excelente tu tutorial. Pero tengo una pregunta.
    ¿Como puedo agregar más capas de fondos?

  • Jordi dice

    hola, genial este código, gracias!,
    solo una pregunta..
    he incluido varias capas “front” con distintas imágenes en “fondo” para que aparezcan entre capa y capa, creo haber averiguado la forma correcta ya que funciona bien, es esta?

    ej:

    lo único es que cuando manipulo el tamaño de la ventana del explorador para comprobar como se ve en otras pantallas de ordenador descubro que las imágenes de fondo al estar “Width:100%;” estas se adaptan pero al hacerlo no se ve organizado,

    como puedo impedir que pase eso?
    por si no me he explicado bien, aquí un ejemplo de mi página para que veas a que me refiero,

    muchas grácias!

    • Oto Whitehead dice

      No te pillo bien el problema exacto. Podrías hacernos un captura de pantalla y subirla algún sitio donde podamos verla? Es con cualquier navegador o alguno en específico?

  • Jordi dice

    Hola,
    la cuestión es que intento poner mas de una imagen en el código “Paralax”,
    intento hacer mi página como uno de los ejemplos a los que te refieres en tu web, en concreto como el de “Spotify”:
    https://www.spotify.com/es/

    podrás ver que si cambias el tamaño de la ventana en “Spotify”, sea cual sea el explorador que utilices, a medida que recorres la pagina hacia abajo las fotos del fondo siempre ocupan su lugar entre sección y sección y sea cual sea el tamaño de la ventana,
    en mi caso eso no ocurre, al cambiar el tamaño de la ventana, las fotos disminuyen de tamaño y desocupan su lugar que debería ser entre sección y sección, igual que ocurre en “spotify”, la pantalla de mi ordenador es de 17″ (1600px de ancho), es el tamaño con el que he configurado mi página y con esas medidas se bien,

    quizás “Paralax” no permite más de una foto o no estoy escribiendo el código correctamente,

    en principio puedo quitarle el valor “100% width” a las fotos para que no disminuyan pero al hacerlo aparece el scroll para desplazarse de lado a lado, como hago para que no aparezca dicho “Scroll” y conservar el alto de las fotos al disminuir el ancho de la ventana para que siempre se vea igual en todas las medidas?

    http://www.creatingwebsites.es/index3.html
    (esta página es de prueba, deberías poder ver a que me refiero)

    muchas gracias por tu paciencia, un saludo.

  • Silvia dice

    Hola estoy intentando diseñar una web con parallax scrolling pero necesito saber las medidas en las que tengo q hacer el fondo. Gracias

    • Oto Whitehead dice

      Al crear un efecto parallax, el tamaño del fondo dependerá de la velocidad del parallax y deberías hacerlo un poco a ojo. En el ejemplo puedes marcar la velocidad del parallax con la variable parallax. Si la velocidad es 1.2 el tamaño del fondo deberá ser 1.2 veces más grandes, es decir que la imagen delantera es de 1000pixeles el fondo debería ser de 1200pixeles. De todas formas lo mejor en este ejemplo es meter imágenes que puedan repetirse (como las nubes del ejemplo) con lo que no importa el tamaño del fondo.

  • Euler dice

    Cordial Saludo..

    Disculpe pero copie el codigo correctamente como dice su tutorial y al probarlo, al hacerle clic a la barra derecha para bajar se desaparece todo, queda todo blanco.

    • Oto Whitehead dice

      Podrías ponerme una dirección donde ver el código o enviarmelo a info@woko.agency?

  • oscar daniel dice

    hola que tal amigo primero que nada gracias por el tutorial, navegando por la red encontre un sitio que las imagenes iban apareciendo conforme iba bajando el scroll, no se si me explique, la web cargaba solo las imagens que se veian y ya cuando bajaba por la web iban como apareciendo las imagenes. me podrias apoyar me gustaria implementarlo creo agilizara mi web saludos y gracias de antemano

    • Jorge Monclús dice

      Hola Oscar,

      Podrías ponerme una dirección donde peuda verse el ejemplo o enviarmelo a info@woko.agency?

  • SoloNuevas dice

    Interesante el tutorial y muy bien explicado, saludos

  • Raquel dice

    Hola buenas tardes, disculpen las molestias, soy nueva en esto de la programación y es la primera vez que estoy utilizando jquery, seguí todos los pasos al pie de la letra pero no me funciona el efecto, la página carga en blanco, no lee ninguna de las dos imágenes, que puedo estar haciendo mal? no tengo idea cómo resolverlo y quisiera poder hacerlo.

    Desde ya muchas gracias por su respuesta.

    • Jorge Monclús dice

      Hola Raquel,

      Podrías pasarnos una dirección donde pudieramos ver el código o enviarlo a info@woko.agency para que podamos echarle un vistazo?

      Saludos,

Posts relacionados