Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

#Tutorial de 3 plugins de Jquery para tipografías

#Tutorial de 3 plugins de Jquery para tipografías 20.AUG.13

Gianfranco Lemmo
Fundador WebBizarro

Hoy vamos a ver 3 plugins de Jquery muy interesantes que nos permiten dar efectos a los textos de nuestros sitios de una forma fácil y rápida, aprovechando todas las posibilidades de CSS3 y JavaScript. Por aquí les dejo el código fuente por si quieren revisarlo.

 

FitText

Primero hablaremos de FitText un plugin sencillo pero muy útil cuando hacemos sitios con diseños adaptables, ya que permite que tus textos se adapten a el tamaño de la pantalla de tus dispositivos con muy poco esfuerzo.

Para empezar los tres plugins que vamos a mencionar dependen de Jquery así que debemos tenerlo importado.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

Para usar FitText solo debemos importar el JavaScript

<script src="js/jquery.fittext.js"></script>

 

Ahora debemos tener un texto dentro de un contenedor que se adapte al tamaño de la pantalla.

<div class="container">

      <div id="headline-1">

            Web Bizarro

      </div>

      <div id="headline-2">

            Web Bizarro

      </div>

</div>

 

Bien por último debemos colocar el script para que el texto se adapte al contenedor.

/*

*     FitText por Default

*/
<script type="text/javascript">
    
    $(document).ready(function () {
    
        $("#headline-1").fitText();

        /*
        
        *     Hace que la compresion de la fuente sea mas agresiva
        
        */

        $("#headline-2").fitText(1.5, { minFontSize: '50px', maxFontSize: '90px' });

    });
</script>    

Esto hace que el texto dentro del div con id  “headline-1” se adapte al ancho de la pantallacon la configuración por defecto pero podemos jugar un poco con los parámetros de configuración de forma que se adapte a nuestras necesidades como lo vemos en el segundo ejemplo.

 

Approach

El segundo plugin que tenemos es bastante útil si queremos llamar la atención sobre un link o algún texto en especial, approach hace que los textos incrementen su tamaño con a medida que acercamos el mouse y es muy simple de usar.

Approach usa JqueryUI para cambiar el color del texto así que si quieres usar esta cualidad de la librería debes incluirlo, además de la librería.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script src="js/jquery.approach.min.js"></script>

 

Tenemos el siguiente link en nuestro HTML.

<a id="approach">

      Acerca el Mouse

</a>

 

Y un pequeño bloque de javascript

<script type="text/javascript">
    
    $(document).ready(function () {
        $("#approach").approach({
        
              "fontSize": "120px"
        
              , "color": "#FF0000"
        
        }, 200);
    });
</script>    

Y listo cuando acercas el mouse al texto el tamaño se incrementa y cambia de color, bueno si quieres destacar algo pero no debemos exagerar el uso de este plugin porque daría una muy mala experiencia a los usuarios.

 

ArcText

Por último veremos ArcText otro plugin que es muy sencillo pero puede darle un toque diferente a tu sitio, con esta librería puedes darle un efecto de arco a tus textos, aprovechándose de las bondades de CSS 3. 

Importamos la libraría de ArcText.

<script src="js/jquery.arctext.js"></script>

 

Ahora sólo necesitamos el bloque de texto que vamos a modificar.

<div id="arctext-1" class="arc-text">

      Web Bizarro

</div>

 

Y el siguiente código de javascript

<script type="text/javascript">
    
    $(document).ready(function () {
        
        $("#arctext-1").arctext({radius: 300});
    
    });
</script>    

 

Y obtendremos algo así

 

También podemos colocarles animaciones de la siguiente forma.

$("#arctext-1").arctext('set',{

      radius: 300,

      dir: -1,

      animation   : {

            speed : 300,

            easing  : 'ease-out'

      }

});

Descargar Código Fuente.

Espero que les halla gustado el tutorial, cualquier comentario no los pueden dejar en la caja de comentarios recuerden seguirnos y apoyarnos Twitter, Facebook y Google+.