 Categorias

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

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

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

FalconMasters Carlos Arturo

11 febrero, 2015
 Diseño Web

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:
o index.html
o estilos.css
o 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:

XHTML

1 <link rel="stylesheet" href="estilos.css">

2 <script src="http://code.jquery.com/jquery-latest.js"></script>
3 <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:

JavaScript

1 $(document).ready(function(){

3 $(window).scroll(function(){

4 var barra = $(window).scrollTop();

5 var posicion = (barra * 0.10);

7 $('body').css({

8 'background-position': '0 -' + posicion + 'px'

9 });

10

11 });

12

13 });

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:

CSS
1 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:
JavaScript

1 $(document).ready(function(){

2 var ancho = $(window).width();

4 // Si trabajamos con una imagen desactivamos el background-size:cover;

5 if (ancho <= 1350){

6 $('body').css({

7 'background-size': 'initial'

8 });

9 }

10

11 // Resto del código parallax

12

13 });

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:
1 $(document).ready(function(){

3 $(window).scroll(function(){

4 var barra = $(window).scrollTop();

5 var posicion = barra * 0.40;

7 $('body').css({

8 'background-position': '0 ' + posicion + 'px'

9 });

10 });

11

12 });