Crea transiciones de gradiente hermosas con Granim.js
El diseño web está lleno de belleza y diseño de interfaz agradable. Algunas características son funcionales mientras que otras son solo para mostrar. Transiciones de gradiente son solo para mostrar pero tienen un buen golpe!
Con Granim.js, puedes construir transiciones de degradado a todo color personalizadas que se ven suaves y combinan muy bien con cualquier sitio web.
Puedes encontrar un montón de ejemplos personalizados en la página de ejemplos principales con muchos estilos diferentes, desde transiciones simples hasta animaciones más complejas utilizando imágenes de fondo.
Granim es la única biblioteca de JS que conozco abordar transiciones de gradiente. Esta es una pregunta que siempre me he preguntado y nunca he encontrado una buena respuesta. Granim es la solución perfecta y es construido en vainilla JavaScript, para que pueda ejecutarse junto con jQuery o cualquier otra biblioteca JS.
Sólo suelta el granim.js archiva en tu página Para empezar. Puede descargar una copia desde GitHub o alojar una desde un CDN en vivo.
Aquí está un ejemplo de código básico desde el repositorio de GitHub:
Las cosas pueden complicarse mucho más que esto, así que realmente deberías profundizar en los ejemplos aprender más. Encontrarás fragmentos de código debajo de cada ejemplo así que puedes crear transiciones de gradiente para fondos de imagen e incluso máscaras de imagen.
Las máscaras de imagen se pueden utilizar para un logotipo, por ejemplo, una imagen PNG, que se oculta detrás de un degradado. Esto te permite crear un logotipo animado por JS donde el gradiente Transiciones lentas a lo largo del texto..
Note que este ejemplo toma mucho de código JS / CSS así que no es una implementación simple.
Pero cuanto más practiques con Granim, más fácil será configurar y personalizar. Y siendo esta la única biblioteca de transición de gradiente real en línea, es la mejor solución para cualquier proyecto..
La biblioteca todavía se actualiza con cierta frecuencia para que pueda consultar la pestaña de problemas para obtener más información.
Sus una linda biblioteca así que no hay demasiadas cosas para salir mal o necesita una actualización. Esto es lo que hace de Granim.js una solución confiable para cualquier sitio pequeño o grande.
A descargar una copia Visite la página de lanzamientos en GitHub o tome una copia de la .js archivo directamente desde cdnjs. Y para ver la fuente en un ejemplo en vivo Eche un vistazo a esta demostración de CodePen creada por Jonathan Schneider.
