Animations au scroll 100% CSS

Bonjour à tous,

Je suis ravi de partager avec vous mon nouvel article sur mon blog dédié au développement frontend : https://theosoti.com/blog/scroll-driven-animation/

Dans cet article, je me concentre sur les animations au scroll en CSS, une solution non seulement élégante, mais aussi bien plus performante que celles réalisées en JavaScript.
Mon objectif est de rendre l’apprentissage de CSS ludique, interactif et directement applicable grâce à des exemples pratiques que vous pouvez tester dans votre navigateur.

Vos retours sont essentiels pour moi :

- L’article a-t-il été utile ?
- Les exemples sont-ils clairs et intéressants ?
- Y a-t-il des sujets ou des fonctionnalités que vous aimeriez que j’aborde dans le futur ?

Merci beaucoup pour votre soutien !
Modifié par TheoSoti (12 Jan 2025 - 11:41)

Bonjour,

Je suis allé voir l'article en lien et je me suis surpris à tout lire, l'article... et les trois autres. Moi qui n'en attendait pourtant rien je dois dire que j'ai été agréablement surpris par le contenu qui est de qualité, intéressant et pas forcément vu ailleurs, du moins pas souvent rencontré. Les propriétés CSS mentionnées sont bien présentées et mises en valeurs, d'autant plus que, lorsque l'on va les voir sur MDN ont ne se doute pas a priori de leur potentiel. Donc, bravo à vous.

Bongota a écrit :
Toi qui est souvent sur le forum, tu n'as pas pu manquer
https://www.alsacreations.com/article/lire/1935-animations-liees-au-scroll-en-css.html
qui parle très bien de cette fonction. Et c'est tout récent.

Oui, mais il est toujours bien d'avoir quelques cas pratiques complémentaires comme proposé ici. Les propriétés CSS exposées sont avant-gardistes pour l'instant. Moi je me contente d'une baseline d'au moins un an, mais ça me permet de faire un peu de veille technologique sur le sujet avant de me lancer.

Bonjour,

Je n'avais pas fait attention que les sujets étaient en anglais, mais c'est souvent le cas, il y a peu de références francophones.

Navigant avec Firefox, j'ai tout d'abord pensé qu'il manquait dans l'article un petit paragraphe indiquant l'existence d'un polyfill et comment le charger et en faire usage si tel ou tel règle ne sont pas "supporter" par le navigateur, puis je me suis ravisé car les polyfill deviennent vite inutiles et l'article est utile, clair et concis

Mais mon post pour t'indiquer quelque chose qui me surprend, en première lecture, mardi donc et avec Firefox, toutes les animations fonctionnaient avec le polyfill ... mais aujourd'hui, "Scroll inside this container to see what it looks like" (animation-timeline: scroll();) ne fonctionne plus et me demande de me servir de Chrome. Pour le coup cela me surprend et me déplait .
1. j'utilise le navigateur que je veut
2. si cette animation ne fonctionne pas, okay pour me dire que mon navigateur ne sait pas faire mais laisser tel quelle sans l'animation.
3. cela fonctionnais il y a 48 heures !? et je ne crois pas avoir eu de maj du navigateur entretemps (ff 134.0), le repo github du polyfil non plus. je suis perplexe

Cdt

edit

Il est possible dans Firefox d'activer ce type d'animation:

1. Taper dans la barre d'adresse about:config
2. valider
3. rechercher layout.css.scroll-driven-animations.enabled
4. passer à true
5. et firefox n'a plus besoin de polyfill
Modifié par gcyrillus (14 Jan 2025 - 17:11)