Erstellen Sie schöne Farbübergänge mit Granim.js
Das Webdesign ist voller Schönheit und ansprechendem Interface-Design. Einige Funktionen sind funktionsfähig, während andere nur zur Show dienen. Verlaufsübergänge sind nur für Show aber sie packen ziemlich viel!
Mit Granim.js, du kannst bauen benutzerdefinierte Farbverlaufsübergänge das sieht glatt aus und passt gut zu jeder Website.
Sie können finden eine Reihe von benutzerdefinierten Beispielen Auf der Seite mit den wichtigsten Beispielen finden Sie viele verschiedene Stile, von einfachen Übergängen zu komplexeren Animationen mit Hintergrundbildern.
Granim ist die einzige JS-Bibliothek, die ich kenne Bewältigung von Gradientenübergängen. Dies ist eine Frage, über die ich mich immer gewundert habe und nie wirklich eine großartige Antwort gefunden habe. Granim ist die perfekte Lösung und das ist es aufgebaut auf Vanille-JavaScript, Es kann also neben jQuery oder einer anderen JS-Bibliothek ausgeführt werden.
Gerade Lass fallen granim.js Datei in Ihre Seite anfangen Sie können entweder eine Kopie von GitHub herunterladen oder von einem Live-CDN hosten.
Hier ist ein grundlegendes Codebeispiel aus dem GitHub-Repo:
Die Dinge können viel komplizierter werden als dies, also sollten Sie es wirklich tun in die Beispiele eintauchen um mehr zu lernen. Du wirst es finden Codeausschnitte unter jedem Beispiel also kannst du Erstellen Sie Farbverlaufsübergänge für Bildhintergründe und sogar Bildmasken.
Die Bildmasken können für ein Logo verwendet werden, beispielsweise für ein PNG-Bild, das sich hinter einem Farbverlauf versteckt. So können Sie erstellen ein JS-animiertes Logo wo die Steigung geht langsam im gesamten Text über.
Beachten Sie, dass dieses Beispiel dauert viel von JS / CSS-Code es ist also keine einfache Implementierung.
Je mehr Sie jedoch mit Granim üben, desto einfacher lässt es sich einrichten und anpassen. Und da dies die einzige echte Online-Bibliothek ist, ist sie die absolut beste Lösung für jedes Projekt.
Die Bibliothek wird weiterhin regelmäßig aktualisiert, sodass Sie auf der Registerkarte "Issues" nach weiteren Informationen suchen können.
Es ist eine hübsche kleine Bibliothek Es gibt also nicht zu viele Dinge, die fehlerhaft sind oder aktualisiert werden müssen. Dies macht Granim.js zu einer zuverlässigen Lösung für kleine und große Standorte.
Zu eine Kopie herunterladen Besuche die Releases-Seite auf GitHub oder nimm eine Kopie von .js Datei direkt von cdnjs. Und zu Sehen Sie sich die Quelle an einem Live-Beispiel an Werfen Sie einen Blick auf diese CodePen-Demo, die von Jonathan Schneider erstellt wurde.
