• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Algunos iconos animados realizados con JavaScript

iconos animados

Los iconos animados hacen que tu sitio web tenga un toque original. Twitter lo suele utilizar, por ejemplo, con el "me gusta" que está representado por un corazón animado.

Para realizar estos iconos, vamos a utilizar mo.js, una poderosa librería de gráficos en movimiento creada por Oleg Solomka. Con este tutorial conseguiremos hacer animaciones increíbles sobre los iconos.

La librería de Oleg es bastante fácil de usar. Hasta ahora, tiene el siguiente tutorial disponible, donde podemos obtener una idea sobre cómo ejercer un control preciso sobre los elementos. Esto abre muchas posibilidades y permite la elaboración de complejas animaciones de aspecto realista.

Los iconos animados deben ser acciones donde tiene sentido tener un estado activo, como por ejemplo en "favoritos", "me gusta" o "votos positivos y negativos".

A continuación podéis probar los siguientes iconos animados haciendo clic sobre el icono para ver su efecto.

EFECTOS DE ICONOS ANIMADOS



Para realizar estos iconos animados, primero descargamos los archivos, el enlace se encuentra más abajo. Dentro del archivo descargado encontramos cuatro carpetas. Abrimos la carpeta js que contiene dos archivos. Copiamos y pegamos los archivos icon-animations.js y mo.min.js a nuestra carpeta js y hacemos un enlace a estos archivos al final de la página donde vayamos a poner los iconos justo antes de </body>. A continuación un ejemplo de cómo ponerlo. Tener en cuenta que la ruta puede cambiar dependiendo de donde tengáis localizados los archivos.

<script src="js/mo.min.js"></script>
<script src="js/icon-animations.js"></script>

Ahora abrimos la carpeta fonts y copiamos y pegamos todas las fuentes en nuestra carpeta de fuentes. Hacemos lo mismo con el archivo font-awesome.min.css, lo copiamos y pegamos a nuestra carpeta css y lo enlazamos, como hemos hecho anteriormente, pero dentro de la etiqueta <head>. Comprobar en este archivo que al inicio estén bien enlazadas las rutas hacia las fuentes.

Seguidamente abrimos la carpeta css, copiamos todo lo que hay dentro del archivo icons.css y lo pegamos dentro del archivo principal css de nuestro tema o simplemente copiamos y pegamos este archivo dentro de la carpeta css de nuestro tema o plantilla. Luego hay que indicar en la página donde ponemos los iconos animados un enlace a este archivo en la parte de arriba dentro de la etiqueta <head>. Un ejemplo.

<link rel="stylesheet" href="css/nombre-archivo-principal.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

o

<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

Una vez puesto los archivos anteriores, sólo nos quedará poner el código HTML del icono animado que vayamos a utilizar. Dentro de la carpeta demo está todo el código HTML de los iconos del ejemplo vistos anteriormente. A continuación, un ejemplo de como sería el código para mostrar un icono animado.

<ol class="grid">
<li class="grid__item">
<button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
</li>
</ol>

Con sólo hacer esto ya lo tendréis funcionando. Es bastante sencillo. Os aconsejo mirar bien el tutorial de mo.js y el archivo icon-animations.js para ver, detenidamente, como se realizan las animaciones. Controlar también el archivo css para realizar los cambios oportunos para que quede bien en vuestra web. Podéis cambiar los iconos por otros que os gusten más, los tenéis en la web de Font Awesome.

A continuación os dejo el enlace de descarga con todos los archivos. Espero que os haya gustado este tutorial.

ENLACE DE DESCARGA
Iconos animados (Iborra Web Design)

CONTRASEÑA DEL ARCHIVO
iborra.es

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code