SummArg | Cursos y recursos para webmasters

24/12/2010

Citas (quotes) animadas utilizando jQuery

Desde marcofolio nos enseñan como hacer una animación para ir mostrando varias citas de un modo llamativo y haciendo uso solamente de javascript.

La idea es muy simple:

    • Mostrar comillas de la izquierda.
    • Mostrar comillas de la derecha.
    • Hacer crecer la caja en donde va la cita.
    • Mostrar el texto de la cita.
    • Ocultar todo.
    • Repetir.

      La animación se puede apreciar en el demo y resulta un recurso interesante para adaptar a algún proyecto.

      Demo | Descargar Código

      En el HTML debemos colocar entre etiquetas <head> las llamadas a jQuery y a nuestro script.js

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      <script type="text/javascript" src="js/script.js"></script>
      

      Entre etiquetas <body> colocamos las etiquetas en donde irá el quote.

      <div id="quotebox">
      	<p class="quotemark leftquote">&#8216;&#8216;</p>
      	<div class="quote"></div>
      	<p class="quotemark rightquote">&#8217;&#8217;</p>
      </div>
      

      En el CSS colocaremos:

      .quote { display:none; float:left; height:69px; }
      .quotemark { display:none; float:left; font:bold 300px Helvetica; letter-spacing:-35px; line-height:300px; }

      Finalmente dentro del archivo script.js encontraremos las opciones para controlar la animación así como la sección para añadir las citas. El script está comentado de modo que podamos modificarlo facilmente.


      Dejar un comentario