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

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.