SummArg | Cursos y recursos para webmasters

16/06/2011

Efecto Parallax con jQuery: Plax

Plax produce un efecto paralax al animar en velocidades diferentes varias imágenes superpuestas. Es simple de implementar y da un efecto llamativo. Cameron McEfee es la creadora de las páginas de error 404 y 500 de github, y nos entrega el plugin para nuestro uso con su correspondiente documentación.

Tras la descarga de los archivos incluimos el plugin entre etiquetas <head> de nuestro documento.

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/plax.js"></script>

Añadimos la configuración de cada una de las capas a animar.

 <script type="text/javascript">
      $(document).ready(function () {
        $('#plax-sphere-1').plaxify({"xRange":40,"yRange":40})
        $('#plax-logo').plaxify({"xRange":20,"yRange":20})
        $('#plax-sphere-2').plaxify({"xRange":10,"yRange":10})
        $('#plax-sphere-3').plaxify({"xRange":40,"yRange":40,"invert":true})
        $.plax.enable()
      })
    </script>

Y finalmente añadimos las imágenes.

<div id="shell">
      <img src="img/plax_logo.png" width="136" height="70" id="plax-logo"/>
      <img src="img/plax_sphere_small.png" width="93" height="92" id="plax-sphere-1"/>
      <img src="img/plax_sphere_large.png" width="215" height="215" id="plax-sphere-2"/>
      <img src="img/plax_sphere_small.png" width="93" height="92" id="plax-sphere-3"/>
</div>

Descarga | Demo | Visto en webtoolkit4.me

Dejar un comentario

  1. George Arthur

    Gracias por esto. Mucho mas facil que usar parallax ya que permite la animación de cada layer por indivdual. Muchas gracias.

Dejar un comentario