Crea bellissime transizioni graduali con Granim.js
Il web design è pieno di bellezza e di design dell'interfaccia piacevole. Alcune funzionalità sono funzionali mentre altre sono solo per lo spettacolo. Transizioni di gradiente siamo unicamente per spettacolo ma fanno un bel pugno!
Con Granim.js, puoi costruire transizioni sfumate personalizzate a colori sembra liscio e si adatta bene a qualsiasi sito web.
Potete trovare un sacco di esempi personalizzati nella pagina degli esempi principali con molti stili diversi, dalle transizioni semplici alle animazioni più complesse utilizzando le immagini di sfondo.
Granim è l'unica libreria JS che conosco affrontare le transizioni del gradiente. Questa è una domanda che mi sono sempre chiesto e non ho mai trovato davvero una grande risposta. Granim è la soluzione perfetta ed è costruito su JavaScript vaniglia, quindi può essere eseguito insieme a jQuery o qualsiasi altra libreria JS.
Appena rilasciare il granim.js file nella tua pagina per iniziare. Puoi scaricare una copia da GitHub o ospitarne una da un CDN live.
Ecco un esempio di codice di base dal repository GitHub:
Le cose possono diventare molto più complicate di così, quindi dovresti davvero scavare negli esempi per saperne di più. Lo troverai frammenti di codice sotto ogni esempio così puoi crea transizioni gradiente per sfondi di immagini e persino maschere di immagini.
Le maschere di immagine possono essere utilizzate per un logo, ad esempio un'immagine PNG, che viene nascosta dietro una sfumatura. Questo ti consente di creare un logo animato JS dove il gradiente lentamente transizioni in tutto il testo.
Nota questo esempio prende Un sacco di codice JS / CSS quindi non è un'implementazione semplice.
Ma più ti eserciti con Granim più facile sarà configurare e personalizzare. E essendo questa l'unica vera libreria di transizione gradiente online, è la soluzione migliore in assoluto per qualsiasi progetto.
La libreria è ancora aggiornata con frequenza di semi in modo da poter controllare la scheda dei problemi per maggiori informazioni.
Suo una piccola biblioteca quindi non ci sono troppe cose da sbagliare o da aggiornare. Questo è ciò che rende Granim.js una soluzione affidabile per qualsiasi sito piccolo o grande.
A scarica una copia visita la pagina dei rilasci su GitHub o prendi una copia del .js file direttamente da cdnjs. E a guarda la fonte su un esempio dal vivo dare un'occhiata a questo demo CodePen creato da Jonathan Schneider.
