Otoño de 2016: nuevas herramientas de animación con y sin JavaScript

Otoño de 2016: nuevas herramientas de animación con y sin JavaScript

Las dos herramientas de animación que me gustaría presentarles hoy no son del tipo común y corriente. No son generalistas de la animación, sino especialistas en pequeñas áreas de aplicación. JavaScript Granim.js te permite crear animaciones con degradados de color, mientras que Radiobox.css se trata del aspecto de tus botones de opción.

Granim.js: animaciones de degradado simples con un gran impacto

Granim.js es un JavaScript nuevo escrito por el desarrollador parisino Benjamín Rubio. Esta pequeña secuencia de comandos le permite animar degradados en, sobre y alrededor de cualquier cosa que se pueda mostrar en un elemento de lienzo.

Granim.js anima los degradados de color de muchas formas diferentes. (Captura de pantalla: Dr. Web)

Usarlo es simple:

Como JavaScript solo pesa unos escasos 10 kb, la sobrecarga se puede descuidar. Esto también justifica la aplicación de la forma más pequeña posible, como animar el logotipo de una página con un degradado de color, como se puede ver en la página de demostración del proyecto. Preste atención al logotipo de Granim.js en la parte superior izquierda.

Este ejemplo también le muestra que JavaScript no solo puede crear gradientes simples, sino que también es capaz de trabajar con máscaras de imágenes. El lanzamiento de degradados funciona a través de un clic o evento, que se muestra de una manera muy impresionante en esta página. Simplemente mueva el mouse sobre los botones fantasma y seguramente le gustará Granim.js muy rápidamente.

El guión está disponible para su descarga gratuita. en Github. Está equipado con la licencia MIT muy liberal, por lo que también puede usarlo en proyectos comerciales, como sitios web de clientes.

Radiobox.css: Opción de opción animada

720 KB ha creado una pequeña colección de animaciones CSS que se supone que liberan botones de radio de todo el aburrimiento. Hay 12 variantes disponibles en total. El efecto se activa cuando se hace clic en el botón de opción correspondiente. Dependiendo del efecto, el botón comenzará a rebotar, girar, crecer, etc.

Radiobox.css es una colección de 12 pequeñas hojas de estilo para aplicaciones de botones de radio.  (Captura de pantalla: Dr. Web)

Radiobox.css es una colección de 12 pequeñas hojas de estilo para aplicaciones de botones de radio. (Captura de pantalla: Dr. Web)

Solo inténtalo. Radiobox.css proporciona efectos interesantes para uno de estos botones que se ignoran en cuanto al diseño la mayor parte del tiempo. Radiobox.css funciona con CSS3 y requiere un navegador moderno para funcionar.

Hacer que funcione es muy fácil. Simplemente asigne la clase a su botón de radio que representa el efecto deseado, por ejemplo:

<input type="radio" class="radiobox-boing"/>

Radiobox.css viene, como el Granim.js presentado anteriormente, bajo la licencia MIT y, por lo tanto, también puede usarse comercialmente. Descargalo a través de Github.

#Otoño #nuevas #herramientas #animación #con #sin #JavaScript

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.