Morton 29 de mayo de 2011 a las 08.46
   Imprimir artículo
elWebmaster.com

jQuery: C贸mo crear un efecto de parallax vertical en tu sitio web


jquerywideEn este art铆culo aprenderemos a crear un sorprendente efecto de superposici贸n, por el cual varios sectores del sitio se ver谩n uno sobre el otro, generando un impacto visual al momento en el que un visitante realiza scroll en nuestra p谩gina web.

Fuente original del art铆culo: Tutorial Shock
Traducci贸n realizada por
elWebmaster.com

Haz clic en este enlace para ver una demostraci贸n >>

La mejor manera de implementarlo es utilizar jQuery. La navegaci贸n est谩 creada para funcionar cuando quien visita el siti se desplaza con el scroll hacia arriba o hacia abajo. aunque puedes navegar el sitio utilizando otros m茅todos tradicionales. El sistema contiene, esencialmente, 4 secciones, dos de ellas conteniendo 2 DIVs, lo que nos da un total de 6 diferentes secciones.

Si simplemente colocaramos los DIVs, no ser铆as capaz de ver el efecto ya que la clave aqu铆 es la aceleraci贸n. Gracias a jQuery podemos personalizar los diferentes valores dependiendo de la velocidad de scroll, con lo que ser谩 posible percibirlo. En su mayor铆a, consiste de diferentes elementos desplazando a distintas velocidades de scroll y superponi茅ndose entre s铆.

El c贸digo es bastante simple, solo necesitamos establecer en el archivo HTML que llamaremos index.html las siguiente l铆neas de c贸digo:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. 2   <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3   <head>
  4. 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 5   <title>nikebetter world</title>
  6. 6   <link href="css/style.css" rel="stylesheet" type="text/css" />
  7. 7    
  8. 8   <script src="js/jquery-1.5.js"></script>
  9. 9   <script src="js/jquery.mousewheel.js"></script>
  10. 10  <script src="js/functions.js"></script>
  11. 11   
  12. 12  </head>
  13. 13   
  14. 14  <body>
  15. 15      <div class="header" align="center" >
  16. 16          <img class="header_bk_final" src="http://www.tutorialshock.com/demos/photo_slider/img/header_banner.png" border="0" usemap="#Map"     />
  17. 17          <map name="Map" id="Map">
  18. 18              <area id="twitter_share" shape="rect" coords="766,62,798,99" href="#" />
  19. 19              <area id="facebook_share" shape="rect" coords="800,63,833,100" href="#" />
  20. 20              <area id="twitter_follow" shape="rect" coords="878,68,909,98" href="http://twitter.com/TutorialShock" />
  21. 21              <area id="facebook_follow" shape="rect" coords="911,67,941,98" href="http://www.facebook.com/pages/TutorialShock/134270309924818" />
  22. 22              <area id="homepage" shape="rect" coords="27,8,359,85" href="http://www.tutorialshock.com/" />
  23. 23              <area  id="link_1" shape="poly" coords="495,79,607,80,621,61,645,54,642,28,453,28,452,53" href="#" />
  24. 24          </map>
  25. 25      </div>
  26. 26      <a class="themshock_banner" href="http://www.wordpressthemeshock.com/the-shock-bundle/"><img src="img/shock-bundle.jpg" border="0" alt="loading_image"  /></a>
  27. 27      <div class="bk bk_0">
  28. 28      <!--Este es el primer fondo y los objetos restante-->
  29. 29          <div class="img_1"></div>
  30. 30          <!--Esta es la primera imagen-->
  31. 31      </div>
  32. 32      <div class="bk_blank title_1">
  33. 33  <!--Esta es la primera barra blanca-->
  34. 34      </div>
  35. 35      <div class="bk bk_1">
  36. 36      <!-- Este es el segundo fondo junto a los elementos restantes-->
  37. 37          <div class="img_2"></div>
  38. 38  <!--Esta es la segunda imagen-->
  39. 39      </div>
  40. 40        <div class="bk_blank title_2"></div>
  41. 41  <!--Esta es la segunda barra blanca-->
  42. 42  <div class="footer"  >
  43. 43      <div>
  44. 44          <img  src="http://www.tutorialshock.com/demos/photo_slider/img/rss_image.png" border="0" usemap="#Map2" class="rss_image" />
  45. 45          <map name="Map2" id="Map2">
  46. 46            <area shape="circle" coords="475,80,61" href="http://feeds.feedburner.com/TutorialShock" />
  47. 47          </map>
  48. 48      </div>
  49. 49  </div>
  50. 50  </body>
  51. 51  </html>

Una vez que hemos configurado el archivo HTML, todo est谩 listo pero que la magia comience de la mano de jQuery:

jQuery(document).ready(function($) {
2 a=parseFloat(400);// Valor inicial del primer fondo (bk 0)
3 b=parseFloat(0);// Valor inicial del primer fondo (bk 0)
4 c=parseFloat(400);// Valor inicial del segundo fondo (bk 1)
5 d=parseFloat(0);// Valor inicial del segundo fondo (bk 1)
6 var scrollTop = $(window).scrollTop();
7 var scroll_actually= new Array();// Identifica los valores X e Y del fondo
8
9 $(window).scroll(function(){
10 if(scrollTop>$(this).scrollTop())
11 {
12 if (getScrollTop()<=1600 && getScrollTop()>=0)// Identifies the position for the first background when a scroll event occurs
13 {
14 a=a+35;// Posici贸n del primer fondo, decrece en 35 pixeles
15 b=b+10;// Posici贸n del primer fondo, decrece en 10 pixeles
16 $(‘.img_1’).css(‘backgroundPosition’, ‘50% ‘+a+’px’);
17 $(‘.bk_0’).css(‘backgroundPosition’, ‘0 ‘+b+’px’);
18 }
19 if (getScrollTop()>=2050 && getScrollTop()<=3650) 20 { 21 c=c+35;// Posici贸n del segundo fondo, decrece en 35 pixeles 22 d=d+10;// Posici贸n del segundo fondo, decrece en 10 pixeles 23 $('.img_2').css('backgroundPosition', '50% '+c+'px'); 24 $('.bk_1').css('backgroundPosition', '0 '+d+'px'); 25 } 26 } 27 else 28 {// Scroll down 29 if (getScrollTop()>=0 && getScrollTop()<=1600) 30 { 31 a=a-35;// Posici贸n del primer fondo, decrece en 35 pixeles 32 b=b-10;// Posici贸n del primer fondo, decrece en 10 pixeles 33 $('.img_1').css('backgroundPosition', '50% '+a+'px'); 34 $('.bk_0').css('backgroundPosition', '0 '+b+'px'); 35 } 36 if (getScrollTop()>=2050 && getScrollTop()<=3650) 37 { 38 c=c-35;// Posici贸n del segundo fondo, decrece en 35 pixels 39 d=d-10;// Posici贸n del segundo fondo, decrece en 10 pixels 40 $('.img_2').css('backgroundPosition', '50% '+c+'px'); 41 $('.bk_1').css('backgroundPosition', '0 '+d+'px'); 42 } 43 } 44 if (getScrollTop()==0)// Ajusta los valores de posici贸n y los resetea a cero durante el evento scroll up 45 { 46 a=parseFloat(400); 47 b=parseFloat(0); 48 c=parseFloat(400); 49 d=parseFloat(0); 50 $('.bk_0').css('backgroundPosition', '0 0'); 51 $('.bk_1').css('backgroundPosition', '0 0'); 52 $('.img_2').css('backgroundPosition', '50% '+400+'px'); 53 $('.img_1').css('backgroundPosition', '50% '+400+'px'); 54 } 55 scrollTop = $(this).scrollTop(); 56 }); 57 }); 58 function getScrollTop(){ // Verifica la suma total de pixeles en la p谩gina entera 59 60 if(typeof pageYOffset!= 'undefined'){ 61 // Most browsers 62 return pageYOffset; 63 } 64 else{ 65 var B= document.body; //IE 'quirks' 66 var D= document.documentElement; //IE with doctype 67 D= (D.clientHeight)? D: B; 68 return D.scrollTop; 69 } 70 } [/javascript] 隆Y listo! Este efecto presenta gran compatibilidad con diversos navegadores, inclusive Internet Explorer 8. Esperamos que te sea de utilidad. Haz clic en este enlace para ver una demostraci贸n >>

Fuente original del art铆culo: Tutorial Shock
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (6)

  1. wilmer72 dice:

    Esta muy chiva pero me pueden dar una plantilla para llevarmela a mi p谩gina y poder modificarla, gracias.

  2. Roy dice:

    @wilmer72 el punto de los tutoriales es que aprendas a hacer las cosas y no s贸lo seas un zombie del copy-paste.

  3. Diego dice:

    Cuando haces scroll hasta el final y luego vouelves a subir pega un latigazo tremendo…, sabes como solucionarlo?

  4. Juan Jose dice:

    Hola una pregunta, no soy muy experto en este tema..
    el codigo queesta en la segunda caa de de texto, el que mepieza asi :jQuery(document).ready(function($) …….
    donde va?.
    mucahs gracias

  5. Diego dice:

    lo copias y lo guardas en un documento de texto con extensi贸n js
    y lo llamas desde el documento donde lo vas a utilizar.
    Ejemplo:

  6. Maxi dice:

    Consulta. Donde consigo estos archivos?
    jquery-1.5.js
    jquery.mousewheel.js
    functions.js

    Mil gracias!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder