Aprende como hacer el famoso efecto parallax de la forma mas fácil y sencilla con HTML, CSS y JS

Share on Pinterest
Comparte con tus amigos










Enviar

Uno de los efectos que mas atraen de los sitios web es el efecto parallax, asi es como se le conoce al efecto de desplazamiento que podemos dar a los elementos de un sitio web al ir bajando en la pagina. Por ejemplo al ir bajando en una pagina y que el fondo se desplace a un tiempo diferente al resto del contenido.

Ejemplo: http://falconmasters.com/demos/parallax_sencillo/

Aquí en este tutorial aprenderás como hacer este efecto parallax sencillo con solo HTML, CSS y Javascript (Jquery). Debes tener conocimientos mínimos de HTML y CSS, de ser posible también de jquery pero si no, no hay problema que aquí tratare de explicarte el código.

Cosas que necesitaremos:

  • Una imagen muy grande o textura
  • 3 archivos:
    • index.html
    • estilos.css
    • parallax.js
  • Jquery

Recursos:

Jquery: http://code.jquery.com/jquery-latest.js

Texturas: 6 Sitios web donde conseguir texturas para tu sitio web

Yo comenzare bajo una estructura html y css ya creada, utilizare la del demo y te compartiré el código para que puedas seguir el tutorial sin problemas.

Primero que nada enlazamos nuestros archivos en nuestro head:

	<link rel="stylesheet" href="estilos.css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="main.js"></script>

Ahora si pasamos a la estructura HTML, que es muy básica y consta de un div con una clase .contenedor que usaremos para centrar todo y dentro varios article con su titulo y texto.

En el código yo solo pongo un article, tu debes copiarlo y pegarlo cuantas veces quieras, el objetivo es tener el scroll (barra de desplazamiento) activo.

Estructura HTML:

	<div class="contenedor">
		<article>
			<h2>Titulo del Articulo</h2>
			<hr>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
	</div>

Código CSS:

* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background:url(bg.jpg); /* Nuestra imagen de fondo */
	background-repeat:no-repeat; /* Indicamos que no se repetira */
	background-size:cover; /* Encajamos la imagen al 100% del ancho */
	background-attachment: fixed; /* Establecemos una posicion fija para la imagen */

	font-family:helvetica, arial, sans-serif;
	line-height:20px;
}

.contenedor {
	width: 90%;
	max-width:900px;
	margin:auto;
}

article {
	background:rgba(24,8,33,.9);
	padding:20px;
	margin:20px 0;
	color:#fff;
	box-shadow:0 5px 5px 3px rgba(0, 0, 0, 0.25);
}

article h2 {
	color:#fff;
}

article hr {
	background:#F64740;
	height:5px;
	border:none;
}

article p {
	line-height: 25px;
}

article h2, article p, article hr {
	margin-bottom: 20px;
}

La parte importante a tomar en cuenta de nuestro codigo CSS son las propiedades background dentro de nuestro body porque con ella cargamos la imagen y le damos las propiedades necesarias.

Estas propiedades son las que usaremos si estamos trabajando con una imagen muy grande, como un paisaje ya que si trabajas con texturas necesitaras cambiar algunas propiedades.

Si trabajas con texturas tienes que cambiar las propiedades de background y dejar el body de la siguiente manera:

body {
	background:url(bg.jpg); /* Nuestra textura */
	background-repeat:repeat; /* Indicamos que la textura se repetira */
	background-attachment: fixed; /* Establecemos una posicion fija para la textura */
	/* Eliminamos la propiedad de background-size */
}

Lo único que hacemos es quitar background-size y cambiar el valor de background-repeat para que se repita la textura en todo el fondo.

Lo siguiente por hacer es lograr que el fondo de nuestro sitio baje mas lento a comparacion del contenido. Primero como recordaras, establecimos un position:fixed; a nuestra imagen, por lo que se queda fija a pantalla. Aunque esta fija, nosotros vamos a desplazarla con Jquery, esto mediante la propiedad background-position:;

Si recuerdas background-position nos permite mover el fondo de nuestro sitio mediante 2 valores, en el primer valor indicamos cuanto desplazaremos de izquierda a derecha y en el segundo cuanto desplazaremos de arriba a abajo.

Nosotros no tocaremos el primer valor, solo el segundo que nos permite desplazarlo de arriba a abajo.

Para desplazarlo lo haremos con un calculo y básicamente lo que haremos es tomar la posición en px del scroll y multiplicarla por un valor inferior al 1.

De esta forma el fondo se moverá mas despacio que el contenido.

Así que traducimos lo que hemos hablado a código jquery, quedándonos de la siguiente manera:

$(document).ready(function(){

	$(window).scroll(function(){
		var barra = $(window).scrollTop();
		var posicion =  (barra * 0.10);
		
		$('body').css({
			'background-position': '0 -' + posicion + 'px'
		});

	});

});

Lo importante aqui es que sepas que puedes cambiar la «velocidad» a la que se desplazara tu fondo, esto cambiando el 0.10 del codigo anterior por otro valor, entre mas grande sea el valor, mas px avanzara cada que muevas el scroll. Esto tiene una desventaja y es que si tienes mucho contenido puedes subir tanto la imagen que llegue un punto en el que ya no puedas mostrar mas imagen y se vea el fondo blanco. Yo te recomiendo que escojas un valor entre 0.40 y 0.10

Básicamente con el código anterior estamos diciéndole que la imagen va a ir subiendo cada que scrolleamos, porque es como si nuestra propiedad css estuviera establecida asi:

background-position: 0 -#px;

Donde # es el numero que va incrementando, como tenemos -# estamos diciendo que estaremos moviendo el fondo de abajo hacia arriba.

Por ultimo decirte que si trabajas con imágenes debes desabilitar el background-size:cover; cuando estés en dispositivos mas pequeños, esto lo hacemos con el siguiente código dentro de nuestro $(document).ready();

Ejemplo:

$(document).ready(function(){
	var ancho = $(window).width();

// Si trabajamos con una imagen desactivamos el background-size:cover;
	if (ancho <= 1350){
		$('body').css({
			'background-size': 'initial'
		});
	}

// Resto del código parallax

});

Mover el fondo de arriba hacia abajo usando texturas.

Si estas usando texturas puedes desplazar el fondo de arriba hacia abajo, para hacer esto es tan sencillo como borrar el signo de: - y cambiando el código css como vimos anteriormente.

Quedando nuestro js de la siguiente manera:

$(document).ready(function(){

	$(window).scroll(function(){
		var barra = $(window).scrollTop();
		var posicion = barra * 0.40;

		$('body').css({
			'background-position': '0 ' + posicion + 'px'
		});
	});

});

Video tutorial: Como hacer efecto Parallax (sencillo) con HTML, CSS y JS

Y de momento eso es todo por este tutorial, espero que te haya gustado, servido y nos vemos en el próximo.

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

25 respuestas a “Como hacer efecto Parallax (sencillo) con HTML, CSS y JS”

  1. Javier Pulcini dice:

    Muy bueno. Gracias!!

  2. Javier Rodriguez dice:

    como pones html dentro de tu web

  3. ALENICO dice:

    Sabes q no me kere cargar la imagen
    necesito ayudaaa. grcs.

  4. Andrex Baldion dice:

    no me craga el fondo no se si es por el jquery

  5. alvarogabrielgomez dice:

    Tengo una duda, si quiero hacer ese mismo efecto pero en un DIV que este a tantos px del tope y de la izquierda como se hace? E intentado y funciona tal cual, pero cuando es un fondo normal que esta en 0 0, pude hacer que funcione unos pixeles a la derecha pero de arriba no

  6. Alain Barrios dice:

    ese fondo pesa un quintal. Deberias reducir el peso optimizar la imagen

  7. Juan Arturo Cruz Cardona dice:

    No me carga el fondo D:

  8. kevin dice:

    no me carga el fondo de imagen porfas ayuda…

  9. Diana Juárez dice:

    como puedo poner un menu despegable en la pagina ….

  10. AlexisRuiz1989 dice:

    tengo problemas con el codigo javascript$’ was used before it was defined.$(document).ready(function(){1Expected exactly one space between ‘function’ and ‘(‘.$(document).ready(function(){1Expected exactly one space between ‘)’ and ‘{‘.$(document).ready(function(){1Missing space between ‘)’ and ‘{‘.$(document).ready(function(){3Missing ‘use strict’ statement.$(window).scroll(function(){3Expected exactly one space between ‘function’ and ‘(‘.$(window).scroll(function(){

  11. Fran BerCa dice:

    Fantástico Carlos Arturo. ¿Podrías realizar un tutorial sobre una web completa (menú, section, aside, footer…) con este efecto parallax? Muchas gracias por enseñar y hacerlo tan bien!

  12. jairo dice:

    muchas gracias por el tuto,, como puedo hacer el efecto en sentido horizontal,,te agradeceria

  13. César Miranda dice:

    Hola que tal, muy buen tutorial!! Tengo una pregunta, cómo se puede hacer un parallax de este estilo? Que maneja un mapa dentro de un canvas y que aparte es responsivo. No he podido encontrar una forma de poder desarrollarlo y me gustaría que me pudieran dar una orientación. Gracias
    http://www.nytimes.com/interactive/2015/10/27/world/greenland-is-melting-away.html?emc=edit_na_20151027&nlid=57890975&ref=cta&_r=1

  14. Ioce Velasco dice:

    Hola como hago el efecto parallax en un div con un imagen o textura de fondo, Saludos

  15. Oliver dice:

    Hola, gracias por el tutorial, me ha funcionado a la perfeccción. Pero tengo una duda,
    ¿Cómo puedo hacer el efecto parallax al interior de un contenedor rectagular, es decir, hacer un rectagulo sin relleno y sin borde, colocarle una imagen de fondo, y aplicarle a esta imagen el efecto, que se encuentra de fondo en el rectangulo?.

    adjunto imagenes: previsulización del navegador, codigo html y css.
    Espero que puedan ayudarme con esto.

  16. Ivan Leonardo Albarr dice:

    tengo una duda es la siguiente: como le puedo cambiar el color a la caja que contiene el texto del articulo?

  17. Alan Aguirre dice:

    Se puede poner una foto al contenedor?

  18. Esteban dice:

    Buenas como podira colocarle un menu a este tipo de pagina? he intentado con varios y se distorciona completamente el formato parallax….

  19. Christopher Maxi Pereira dice:

    como hago si modifique el código de una textura, pero esta ya no hace la función de parallax. https://uploads.disquscdn.com/images/d2fbbb58e2a1de3a28f98e49be381f86546c2031a10f0c6c726e6e68ad6d6b1b.png

  20. Harvey Herrera dice:

    oye tengo una duda si en mi parallax yo lo quiero hacer responsive para adaptarlo al tamano de cualquier dispositivo

    como seria.?!

  21. Miguel Arturo Malaver Fajardo dice:

    Disculpa Falcon siempre lo he admirado eres un excelente bloguero pero en esta oportunidad el fondo no me sale sino blancooo
    la imagen no aparece…

  22. distancia2 dice:

    pues a mi no me funciona u.u me manda un error en la linea 1 una variable no definida ya hasta copie y pegue el codigo pero me sigue mandando ese error,que podria ser?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso