Tendance centrale, les animations et micro-interactions sont des éléments à mettre en place obligatoirement lors du déploiement d’un produit interactif.
Si vous êtes ici, vous n’avez évidemment pas pu passer à côté : les animations sont présentes partout aujourd’hui. Lors du scroll, sur de la typographie et surtout lors d’interactions, elles donnent du feedback à l’utilisateur pour une meilleure expérience. Vous l’avez compris, le temps des sites plats et sans vie est désormais révolu.
Pour renouveler vos bibliothèques d’animation, je vous propose une petite sélection de 12 ressources avec des dizaines d’effets pour booster vos interfaces
Circle Menu
Une bonne alternative à un menu burger avec de grosses typographies par exemple.
Animate CSS Grid
Une bibliothèque pour animer les éléments CSS Grid. Utilisable également avec React.
Scrolling Gradient
Le dégradé de fond change lors du scroll : simple, efficace, comme ici par exemple.
Rallax
Encore une ressource pour créer simplement un effet de parallaxe sur vos pages. À bookmarker une fois pour toutes !
Splitting
Une intéressante ressource pour couper des éléments de textes, images et autre. Facile d’utilisation, Splitting créer des variables CSS que vous pouvez customiser à votre sauce.
CSS Trick Hover
Un bel exemple de micro-interaction réussie. Testez-le, vous serez conquis.
Bttn
Une bibliothèque complète d’effets de boutons plutôt poussés.
Micro Interactions
Une bibliothèque de micro-interactions utile pour proposer un feedback cohérent au sein de toute votre expérience.
Half Second Hamburger Helper
Gagnez du temps avec des dizaines d’exemples de menu burger aux interactions intéressantes.
T-Scroll
Tout est dans l’image ci-dessous : T-Scroll vous permet de créer d’intéressantes interactions lors du scroll.
jQuery Draw
Un plugin jQuery pour animer les lignes de vos fichiers .SVG.
3D Lines avec Three.js
Une ressource pour créer des lignes animées dans le background de votre site.
