12 effets Javascript et CSS pour booster vos animations

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.

Circle Menu

Animate CSS Grid

Une bibliothèque pour animer les éléments CSS Grid. Utilisable également avec React.

Animate CSS Grid

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 !

Ralax

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.

CSS Trick Hover

Bttn

Une bibliothèque complète d’effets de boutons plutôt poussés.

Buttons

Micro Interactions

Une bibliothèque de micro-interactions utile pour proposer un feedback cohérent au sein de toute votre expérience.

micro interactions

Half Second Hamburger Helper

Gagnez du temps avec des dizaines d’exemples de menu burger aux interactions intéressantes.

Burgers

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.

jQuery Draw

3D Lines avec Three.js

Une ressource pour créer des lignes animées dans le background de votre site.

3D Lines

Que pensez-vous de cette sélection ? Avez-vous eu l’occasion de tester une de ces ressources ?

5 commentaires

Répondre Le résumé de la semaine des meilleurs articles - Muriel Carrillo : Création de sites internet Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*