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».
Índice del artículo
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