';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Iconos animados realizados con JavaScript

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, voy a utilizar mo.js, una poderosa librería de gráficos en movimiento creada por Oleg Solomka. Con este artículo conseguiremos hacer animaciones increíbles sobre los iconos.

Con esta librería 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 tenga sentido tener un estado activo, como por ejemplo en “favoritos”, “me gusta” o “votos positivos y negativos”.

Ejemplos de iconos animados

A continuación podéis probar los siguientes iconos animados en la página de CodePen, sólo tenéis que hacer clic sobre el icono para ver su efecto. Los podéis personalizar como queráis. El enlace que está antes de los iconos tiene una animación que podéis ver con solo pasar el cursor por encima del enlace.

Ver ejemplos en CdePen

Código para implementar estos iconos animados

Para realizar estos iconos animados, primero descargamos los archivos, el enlace se encuentra más abajo. Dentro del archivo descargado encontramos tres 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 preferiblemente en nuestro archivo functions.php del Child Theme si utilizamos WordPress. También podéis utilizar el siguiente enlace para la librería mo.min.js.

https://cdn.jsdelivr.net/mojs/0.174.4/mo.min.js

Para los iconos he utilizado Font Awesome la versión 4, no utilizar otra versión para este ejemplo. Podéis utilizar el siguiente enlace para incluirlo en vuestro sitio web.

https://use.fontawesome.com/13bf04a6da.js

Seguidamente abrimos la carpeta css, copiamos todo lo que hay dentro del archivo icons.css y lo pegamos dentro de nuestro archivo de estilos principal CSS.

Ahora 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 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>

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.

!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design

Comentarios
Compartir
Paco (Iborra Web Design)

Artículos destacados

Deja un comentario

¿Necesitas ayuda? Escríbeme por Whatsapp