Crea hermosas transiciones de degradado con Granim.js

El diseño web está lleno de belleza y un diseño de interfaz agradable. Algunas características son funcionales, mientras que otras son solo para mostrar. Las transiciones de degradado son exclusivas para mostrar, ¡ pero tienen un gran impacto!

Con Granim.js, puede crear transiciones personalizadas de gradientes a todo color que se vean sin problemas y se acoplen muy bien con cualquier sitio web.

Puede encontrar un montón de ejemplos personalizados en la página principal de ejemplos con muchos estilos diferentes, desde transiciones simples hasta animaciones más complejas usando imágenes de fondo.

Granim es la única biblioteca de JS que conozco que aborda transiciones de gradiente . Esta es una pregunta que siempre me he preguntado y nunca encontré una gran respuesta. Granim es la solución perfecta y se basa en JavaScript simple, por lo que se puede ejecutar junto con jQuery o cualquier otra biblioteca JS.

Simplemente granim.js archivo granim.js en su página para comenzar. Puede descargar una copia de GitHub o una de CDN en vivo.

Aquí hay una muestra de código básico del repositorio de GitHub:

Las cosas pueden ser mucho más complicadas que esto, así que deberías profundizar en los ejemplos para obtener más información. Encontrará fragmentos de código debajo de cada ejemplo para que pueda crear transiciones de gradiente para fondos de imágenes e incluso máscaras de imágenes.

Las máscaras de imagen se pueden usar para un logotipo, por ejemplo, una imagen PNG, que se oculta detrás de un degradado. Esto le permite crear un logotipo animado JS donde el gradiente transiciones lentamente a lo largo del texto .

Tenga en cuenta que este ejemplo requiere una gran cantidad de código JS / CSS, por lo que no es una implementación simple.

Pero cuanto más practiques con Granim, más fácil será configurarlo y personalizarlo. Y como esta es la única biblioteca de transición de degradado real en línea, es la mejor solución para cualquier proyecto.

La biblioteca todavía se actualiza con frecuencia para que pueda consultar la pestaña de problemas para obtener más información.

Es una biblioteca bastante pequeña, por lo que no hay demasiadas cosas que pueden fallar o necesitan una actualización. Esto es lo que hace que Granim.js sea una solución confiable para cualquier sitio pequeño o grande.

Para descargar una copia, visite la página de lanzamientos en GitHub o tome una copia del archivo .js directamente de cdnjs. Y para ver la fuente en un ejemplo en vivo eche un vistazo a esta demostración de CodePen creada por Jonathan Schneider.