Sélection Codepen #1

Une sélection de belles animations SVG sur Codepen

J'ai décidé de réaliser une petite sélection d'animation SVG sur Codepen. Ici n'est pas le but de démarrer des sélections régulières, mais de temps en temps, si cela permet de donner l'inspiration à certains d'entre nous, c'est gagné !

Loaders SVG

Réalisés par Aurer ces 8 loaders sont intéressants pour une bonne raison, il n'y a pas de Javascript utilisé. Attention cependant à la compatibilité des navigateurs (IE est totalement dépourvu de la fonctionnalité animateTransform).

See the Pen jEGbA by aurer (@aurer) on CodePen.


Dans la même idée, et encore une fois sans utilisation de Javascript, Nikhil Krishnan propose ici 10 loaders réalisés 100% en SVG.

See the Pen rVoXJa by nikhil8krishnan (@nikhil8krishnan) on CodePen.


Cette fois-ci, réalisés a l'aide de TweenMax, Zach Schnackel a propose une version GSAP des loaders de Sam Herbert. (Bon, personnellement, je ne suis pas fan de TweenMax...).

See the Pen YwygoQ by zslabs (@zslabs) on CodePen.


SVG Balloon Slider

Quand je vois ce genre d'animation réalisée en SVG, je me demande si cela ne traite pas parfois de l'exploit ! Cette animation SVG, couplée encore une fois à TweenMax par Chris Gannon en est l'exemple typique. J'avoue avoir du mal a imaginer l'intégration d'une telle animation dans une page web classique, mais dans le cas d'un formulaire de sondage ou d'une suite de questions pour le remplissage d'un profil utilisateur, peut-être que certains arriveraient a en tirer profit.

See the Pen xweVNM by chrisgannon (@chrisgannon) on CodePen.


In One Piece

Voilà un type d'animation intéressante pour vos homepages ou landing pages. Cette animation (par Arsen Zbidniakov), qui, en plus d'être élégante, aura pour effet de garder l'attention de l'utilisateur sur la page.

See the Pen pjypwd by ARS (@ARS) on CodePen.


Une idée de background originale

Si vous réalisez un site dans le domaine des Fintechs, je trouve que cette animation peut apporter un bel effet en background sur l'une des parties du site. Car soyons francs, ce graphique a très certainement été réalisé dans un but purement artistique et certainement pas pour réalisé des graphiques a proprement parler.

See the Pen PwQXgG by chrisgannon (@chrisgannon) on CodePen.


J'aime beaucoup codepen, le site a beaucoup évolué au cours des dernières années et c'est pour moi une réelle source d'inspiration lorsque je suis amené a monter un site web de A à Z. En espérant vous avoir aidé a trouver de nouvelles idées, de l'inspiration, ou de la motivation pour créer !

blog comments powered by Disqus
Licence Creative Commons Cet article est mise à disposition sous Licence Creative Commons Attribution - Partage dans les mêmes Conditions 4.0 International.