Este tutorial le mostrará cómo crear un encabezado de página Web de Parallax cool usando jQuery y el plugin de jQuery jParallax. Se trata de un experimento simple y no necesita ningún conocimiento de javascript, simplemente viejo HTML y CSS. Sin embargo, esto tiene el potencial para crear algunos efectos realmente impresionantes.

Los archivos

Así, en primer lugar necesitamos algunos archivos de javascript:

Allí le dije que esto era simple. Next…

Las imágenes

Antes de hacer ya su una buena idea para crear las imágenes que utilizaremos en nuestro encabezado. Puede tener tantas capas como desee, pero en este ejemplo utilizamos cuatro imágenes:

  • Cielo
  • Sun
  • Hierba
  • Árbol

Si no sabes lo que soy en sobre (o no sabes lo que es el efecto de paralaje) echar un vistazo a este artículo en wikipedia y verá lo que quiero decir. Así que una vez que tengamos nuestras imágenes luego permite hacer algunas HTMLing.

El código HTML

El código HTML es donde se realiza la mayor parte de la obra. Digo un poco de mentira aquí porque más de la labor es realizada por jParallax, pero se realiza automáticamente por lo que no necesitamos realmente para preocuparse. Por lo que el código HTML debe tener el siguiente aspecto:

 <html xmlns="http://www.w3.org/1999/xhtml" > <head> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.jparallax.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <title>Parallax Website Header</title> <script type="text/javascript"> jQuery(document).ready(function(){  jQuery('#parallax').jparallax({}); }); </script> </head> <body>   <div id="parallax">  <div style="width: 700px; height: 300px;">   <img alt="" src="images/0_day.png"/>  </div>  <div style="width: 750px; height: 280px;">   <img style="position:absolute; top:0px; left:350px;" alt="" src="images/1_sun.png"/>  </div>  <div style="width: 700px; height: 250px;">   <img style="position:absolute; top:200px; left:0px;" alt="" src="images/2_grass.png"/>  </div>  <div style="width: 900px; height: 260px;">   <img style="position:absolute; top:100px; left:150px;" alt="" src="images/3_tree.png"/>  </div>  <div style="width: 900px; height: 260px;">   <img style="position:absolute; top:100px; right:150px;" alt="" src="images/3_tree.png"/>  </div>  <div style="width: 800px; height: 250px;">   <h1 style="position:absolute; top:100px; right:355px;">My Site</h1>  </div> </div>   </body> </html>

¿Yeh bastante simple? Así que lo que está sucediendo aquí.

  • Desactivar primero incluimos nuestros archivos javascript que hemos descargados. No olvide incluir el archivo de jParallax después del archivo jQuery.
  • Entonces llamamos nuestro único bit de javascript. Una función que inicializa el jParallax en un div especificado (en este caso #parallax). Nota puede pasar opciones aquí, pero sólo vamos a mantenerlo simple y utilizar las opciones predeterminadas.
  • Dentro de nuestro div de paralaje especificamos nuestras capas. En este caso cada capa es un div, pero podría ser un li o simplemente una img. Lo importante a observar es los estilos de las imágenes y div. Esto es lo que controla la sensación de la paralaje cuando está activo. Lamentablemente no hay ningún plan conjunto para calcular los tamaños. Sólo jugar con ellos hasta obtener algo que se ve bien.

Y es que realmente. Evidentemente, en este ejemplo hemos puesto en algún texto como un ejemplo pero nada podría ir dentro de la div. Ser creativos.

La CSS

La CSS es casi demasiado simple para mencionar pero lo haré de todos modos. Todo lo que necesitamos hacer es definir los estilos de #parallax.

#parallax {  background:#ccc;   position:absolute;   overflow:hidden;  width:700px;   height:300px;  }

Son cosas importantes que recuerden sobre el CSS:

  • Alto y ancho para cada niño deben establecerse explícitamente a través de CSS. jParallax da también automáticamente cada niño posición: absoluto para empezar a moverlos, por lo que no es necesario configurar manualmente.
  • El propio elemento parallaxed debe tener posición: relativa o posición: absoluto especificado o se moverán los niños respecto al documento en lugar de visión!

Conclusión

Así que ahí lo tienen. Un encabezado de página Web simple paralaje. Este ejemplo es relativamente sencillo, pero si usas tu imaginación estoy seguro de que uno se puede topar con algunas buenas ideas. Si por qué no nos dices sobre ellos en los comentarios a continuación.

Ver la demostración Descargue el archivo ZIP