Antes de empezar este pequeño tutorial es recomendable si no cuentas con conocimientos previos en JavaScript se te invita a leer el siguiente artículo JavaScript para principiantes.
En el siguiente ejemplo se mostrará cómo se realiza el efecto parallax en JavaScript, el cual es una técnica en el desarrollo web , su función es que las imágenes de fondo se muevan más lentas que las imágenes de primer plano, creando una ilusión de profundidad, para este ejemplo es necesario tener conocimiento básico de HTML y CSS.
Se necesitan crear 3 archivos y una imagen que abarque toda la dimensión de tu página web en tu carpeta de proyecto
- index.html
- style.css
- main.js
Contenido HTML y CSS
En index.html agregamos las siguientes líneas de código en la sección head
|
1 2 3 |
<link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="main.js"></script> |
En body se deben colocar un div con una clase .contenido que tenga varios article dentro con varios párrafos p dentro, esto es para que el contenido pueda tener scroll activo.
|
1 2 3 4 5 6 7 8 9 |
<body> <div class="contenedor"> <article> <h2>Titulo del Articulo</h2> <hr> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor 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. </article> </div> </body> |
En style.css le asignamos al body la imagen como fondo, y le damos las siguientes propiedades, que se adapte al 100% de la pantalla y que sea fija.
|
1 2 3 4 5 6 |
body { background:url(mundo.jpg); /* Nuestra imagen de fondo */ background-repeat:no-repeat; /* Indicamos que no se repetir· */ background-size:cover; /* Encajamos la imagen al 100% del ancho de la pantalla */ background-attachment: fixed; /* Establecemos una posiciÛn fija para la imagen */ line-height:20px; } |
Centraremos nuestra clase contenido y le daremos un mejor aspecto visual a nuestros article.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.contenedor { width: 90%; max-width:900px; margin:auto; } article { background:rgba(20,38,13,.9); padding:20px; margin:20px 0; color:#fff; box-shadow:0 5px 5px 3px rgba(0, 0, 0, 0.25); border-radius: 10px; } article h2 { color:#fff; } article hr { background:green; height:5px; border:none; } article p { line-height: 25px; } article h2, article p, article hr { margin-bottom: 20px; } |
Efecto parallax
Lo siguiente por hacer es que nuestra imagen de fondo baje más lento que nuestro contenido al desplazarnos con el scroll como está se encuentra en position fixed se quedará fija pero podemos cambiar ese comportamiento con jQuery, usando la propiedad background-position.
background-position permite mover el fondo de nuestro sitio mediante 2 valores, en el primer valor indicamos cuánto queremos que se desplace de izquierda a derecha y en el segundo cuanto desplazamos de arriba a abajo.
Necesitamos utilizar el segundo valor para moverlo de arriba hacia abajo, esto se hace mediante el siguiente código jQuery en nuestro archivo main.js.
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $(window).scroll(function(){ var barra = $(window).scrollTop(); var posicion = (barra * 0.15); $('body').css({ 'background-position': '0 -' + posicion + 'px' }); }); }); |
Con la línea $(document).ready(function(){ }); le estamos indicando que el código funcione hasta que la pagina termine de cargar.
Dentro de la función agregamos un evento de esta forma $(window).scroll(function(){ }); esto es para indicar lo que queremos que haga cuando el usuario mueva el scroll.
Después debemos obtener el valor de nuestra barra para ello creamos una variable barra y la igualamos a la de nuestro scroll con el siguiente código var barra = $(window).scrollTop();
Para indicar la posición de la barra usamos una variable posición y la igualamos a barra0.15 esto es para que al momento de mover el scroll si se mueve 10 px se multiplicaran por 0.15 y el resultado será el movimiento de nuestro fondo, var posición = (barra0.15); se puede modificar la velocidad cambiando el valor de 0.15 en var posicion.
Accedemos al body en el CSS y editamos su propiedad con $(‘body’).css({ ‘background-position’: ‘0 – ’ + posicion + ‘px’ }); esto es como si en el CSS se pusiera un background-position: 0 -50px; el -50px es la posición de la barra.
Siguiendo cada paso de este post se puede hacer de manera sencilla el efecto parallax, así como muchos otros efectos que nos ayudan a tener aplicaciones web más dinámicas y atractivas. Si tienen alguna duda o sugerencia no olviden dejarla en la sección de comentarios.