CSShake - Apprendemos.com

Efecto Shake (zumbido o vibración) con CSS

A día de hoy es raro que no conozcas GitHub si alguna vez has desarrollado algo y estabas buscando fragmentos de código con los que agilizar tu trabajo. GitHub hace las veces de almacen para el control de versión mediante Git. El código se almacena de forma pública en su versión gratuita, teniendo siempre opción de realizar el pago para poder utilizar el servicio de forma privada.

De vez en cuando me gusta entrar y ver los repositorios de moda para esta semana o este mes.

Hoy he encontrado unas clases que mediante CSS harán que los elementos del DOM vibren a nuestro gusto.

Se trata de CSShake, y aunque con cierto abuso puede ser un efecto molesto a la vista, puede estar bien para un elemento puntual. Como hacen por ejemplo muchos juegos de encontrar la palabra según una imagen. Cuando pasan ciertos segundos sin acertar, el botón para utilizar la ayuda o comprar la solución comienza a vibrar para captar tu atención.

 

El respositorio de CSShake lo podemos encontrar aquí, en GitHub:

https://github.com/elrumordelaluz/csshake

CSShake - Apprendemos.com

 

 

En los ejemplos de su demo podemos ver la cantidad de diferentes efectos que podemos escoger. Podremos elegir cuando comienza la animación y controlar los distintos estilos.

 

CSShake - Apprendemos.com

 

CSShake - Apprendemos.com

 

 

Si nos fijamos en la explicación de como realizar la animación vemos que es facilísimo.  Basta añadir unas clases para conseguir unos efectos llamativos.

 

 

03

 

 

Si algo nos gusta de la gente que comparte todo el código, es que además te invita a hacer un fork de su trabajo. Todo sea por mejorar.

Os dejo el enlace a la demo:

http://elrumordelaluz.github.io/csshake/

Author Image
Author: ManuAlamar iOS & .NET Developer. Ingeniero Técnico Informático especialmente interesado en proyectos relacionados con la tecnología móvil y web