Créez de belles transitions de dégradés avec Granim.js
La conception Web est pleine de beauté et de design d'interface agréable. Certaines fonctionnalités sont fonctionnelles tandis que d'autres sont juste pour le spectacle. Transitions de dégradé sont uniquement pour le spectacle mais ils emballent tout un coup de poing!
Avec Granim.js, vous pouvez construire transitions de dégradés de couleur personnalisée qui semblent lisses et se marient bien avec n'importe quel site Web.
Tu peux trouver un tas d'exemples personnalisés sur la page principale des exemples avec de nombreux styles différents, des transitions simples aux animations plus complexes utilisant des images d'arrière-plan.
Granim est la seule bibliothèque JS que je connaisse s'attaquer aux transitions de gradient. C'est une question à laquelle je me suis toujours posé la question et n'a jamais vraiment trouvé de réponse satisfaisante. Granim est la solution parfaite et c’est construit sur la vanille JavaScript, il peut donc fonctionner à côté de jQuery ou de n'importe quelle autre bibliothèque JS.
Juste jeter le granim.js déposer dans votre page pour commencer. Vous pouvez télécharger une copie de GitHub ou en héberger une à partir d’un CDN en direct..
Voici un exemple de code de base du repo GitHub:
Les choses peuvent devenir beaucoup plus compliquées que cela, alors vous devriez vraiment creuser dans les exemples pour apprendre plus. Tu trouveras extraits de code sous chaque exemple afin que vous puissiez créer des transitions de dégradé pour les arrière-plans et même les masques.
Les masques d'image peuvent être utilisés pour un logo, par exemple une image PNG, qui est cachée derrière un dégradé. Cela vous permet de créer un logo animé par JS où le gradient transitions lentes dans le texte.
Notez que cet exemple prend beaucoup de code JS / CSS donc ce n'est pas une simple implémentation.
Mais plus vous vous entraînerez avec Granim, plus il sera facile de configurer et de personnaliser. Et comme il s’agit de la seule véritable bibliothèque en ligne de transition sur gradient, c’est la meilleure solution pour tout projet..
La bibliothèque est toujours mise à jour semi-fréquemment, vous pouvez donc consulter l'onglet des problèmes pour plus d'informations..
Ses une jolie petite bibliothèque il n'y a donc pas trop de problèmes ou de mises à jour. C’est ce qui fait de Granim.js une solution fiable pour tous les sites, petits ou grands.
À télécharger une copie visitez la page des communiqués sur GitHub ou prenez un exemplaire du .js déposer directement à partir de cdnjs. Et à voir la source sur un exemple en direct jetez un coup d'œil à cette démo de CodePen créée par Jonathan Schneider.
