CSS Emoticons: plugin de jQuery que trasforma texto en emoticonos

CSS Emoticons es un sencillo plugin de jQuery que permite convertir el texto de cualquier emoticono en el icono de una cara realizado enteramente con CSS. El plugin utiliza propiedades CSS3 para funcionar, por lo que es soportado por FireFox, Chrome, Safari, y Opera. En Internet Explorer, los emoticonos simplemente aparecerán como las versiones textuales originales.

El funcionamiento es muy sencillo. Basta tener un texto sobre el que deseemos actuar:

<div class="comment">
  Hola :-)
</div>

Incluir los ficheros necesarios:

<link href="css/jquery.cssemoticons.css" media="screen" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cssemoticons.js" type="text/javascript"></script>

y activar el plugin para el contenedor que anteriormente hemos creado:

$('.comment').emoticonize();

CSS Emoticons » »

dynamo: añade ligeros efectos de texto a tu contenido

Dynamo es un plugin de jQuery que nos permite, de una manera sencillla, añadir un efecto de texto y una nueva dimensión al contenido de un sitio web. Permite realizar ligeros cambios en el texto para llamar la atención sobre determinadas partes o conceptos de una página web. Lo mejor es ver un ejemplo de funcionamiento.

Ver ejemplo » »

La implementación de Dynamo es bastante sencilla. Basta con "encapsular" el texto en un contenedor y especificar las palabras o líneas que deseas recorrer.

<p>webintenta es un blog en el que puedes encontrar tutoriales de <span class="dynamo" data-lines="css3,jquery,php,etc">html5</span></p>

Además, a la hora de realizar la llamada a la librería, podemos añadir opciones de personalización como la velocidad a la que queremos ejecutar la animación o la pausa que debe haber entre una animación y otra. Por ejemplo:

    $('.dynamo').dynamo({
      speed: 800,
      delay: 1500
    });

Dynamo » »

TimeTo: plugin de jQuery para realizar cuentas atrás

TimeTo es un plugin para jQuery que nos permite añadir una cuenta atrás de un modo muy sencillo. Permite múltiples opciones de personalización y su aspecto viene definido por estilos CSS.

Por ejemplo, para realizar una cuenta atrás de 10 segundos bastaría con añadir un código similar al siguiente.

$('#countdown').timeTo(10, function(){ alert('Countdown finished'); });

TimeTo » »

FlipClock.js

FlipClock.js es un plugin de jQuery para representar cualquier cosa relacionada con el tiempo. Tiene soporte para funcionar como un reloj, cuenta atrás o como un simple contador. Puede personalizarse completamente con CSS y existen varios métodos para controlarlo (start, stop, getTime, setTime..) con sus respectivos callbacks.

FlipClock.js

FlipClock.js » »

Heap Shot: plugin de jQuery para crear una pila de fotos

Heap Shot es un plugin de jQuery que genera una pila de imágenes y genera un efecto, en el que el paso de una foto a otro simula la forma en que lo hariamos de un modo físico: pasando la primera imagen al final de la pila de imágenes. El plugin se instala con unas pocas líneas de código, y se puede personalizar a través de las múltiples opciones que ofrece.

Heap Shot

HeapShot jQuery plugin » »