Actualmente están muy de moda los efectos Parallax en las Webs, no obstante, la página de Google Nexus (los dispositivos móviles Android de Google) entre otras muchas, tienen implementado este diseño en su Web.
Para quien no lo sepa, el efecto parallax es aquel que nos da una sensación de 3 dimensiones, de cierta profundidad en la web. Al hacer scroll, los elementos de la misma, se mueven a velocidades distintas, creando así este curioso efecto.
Lo primero es cargar las librerías de Jquery en vuestra 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.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js></script>
Ahora necesitaremos dos imagenes, una para el frente y otra para el fondo.
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;
height:2000px;
}
y este código en un archivo .js de vuestro 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.
<div id="parallax-back"></div> <div id="parallax-front"></div>
Importante
Recuerda darle un alto (height) considerable al #parallax-front, para que puedas ver bien el efecto.
Recuerda también que el contenido de tu Web irá en #parallax-front.
En Próximas entradas os hablaré y prepararé algun tutorial sobre Diseños Responsivos.
