••
< if title: />

Day3 : Smoke svg animation

projet : one experiment per day

< if content: />

Depuis maintenant 3 jours je réalise une experimentation de code chaque jour, parfois j’ai plus de temps et parfois j’en ai moins mais j’essaye de quand meme poster une chose. Le tout afin d’améliorer ma réactivité et mes skills.

Aujourd’hui je manquais de temps mais je voulais tester un bout de code simple d’une sequence d’images en svg qui me permettrait de créer une animation au chargement de la page sur une image, ici avec de la fumée.

En fond une magnifique photo de mer de Trevor Pottelberg vu sur bored panda
La sequence d’images SVG se présente comme ça : (voir la séquence d’img)

On pourrait s’imaginer ça sur tout un site, avec d’autres sequences d’images ou quand le trigger (du scroll arrive sur l’image en question, etc…)
la semaine prochaine je vais animer une image svg au scroll pour la premiere fois d’ailleurs (keep in touch)

→ Le résultat final avec l’animation au chargement et le code donne ca :
https://quentinrenaux.com/xp/1day1code/smoke


ps: je reviendrais sur certaines parties de cette page dans les prochaines experimentations pour ajouter un peu plus d’explication sur le code qui utilise aussi gspa pour l’animation.

edit: D’ailleurs j’ai remarqué de légers bugs en postant la page à l’instant
et je ne l’ai pas tester sur mobile – PAS BIENNNNNNN
J’aurais aussi pu ajouter un bouton pour rafraichir plus facilement la page 🙂

Pourquoi utiliser du SVG plutôt qu’une video ou qu’un gif ? car le SVG est super légé, qu’on peut le manier/animer avec du code, et qu’il n’a pas de pixellllls


< if thumbnail: />

quentinrenaux accueil
quentinrenaux mail
quentinrenaux insta
••
••
••
••
••