Hello,
Toujours sur mon projet de scrollytelling, vous pouvez voir le résultat actuel ici : https://petitmote.github.io/scrollytelling/ et le code source : https://github.com/PetitMote/scrollytelling
Comme vous pouvez le constater, j’ai un peu de mal à avoir quelque chose de bien propre. On a un résultat qui fonctionne déjà à peu près, mais pas tout à fait.
J’essaye d’avoir des figures (qui peuvent être des images, des diagrammes dans un canvas ou une div avec une carte leaflet) en fond ou sur le côté qui transitionnent de l’une à l’autre proprement. Pour ça, j’utilise une transition CSS sur l’opacité, et je fais également basculer la visibilité en collapse. Le problème, c’est qu’on voit bien en début de transition que la figure suivante n’est pas au même niveau.
Mon problème vient principalement que position: sticky réserve la place pour l’élément, même en visibility: collapse. Le seul moyen de le vider est de passer à du display: none, mais cela ne fait pas fonctionner la transition à l’apparition (même avec un timeout d’abord), et a tendance à décaler la position dans la page quand les blocs apparaissent.
J’ai essayé d’utiliser un conteneur qui serait sticky, et de jouer sur les figures à l’intérieur de ces conteneurs, mais cela a pour résultat de réserver toute la place nécessaire pour les multiples figurent, et elles ne descendent pas avec le scroll.
Je peux essayer de jouer avec du position: absolute, mais cela fait sauter les effets du visibility: collapse et du opacity: 0, ce qui veut dire que je ne peux que utiliser du display: none et oublier tout effet de transition.
Est-ce que je rate quelque chose ? Je n’arrive pas à trouver comment régler ce soucis, sauf à éventuellement vider directement mon figure pour le re-remplir ensuite.
Pour vous aider à vous y retrouver, les liens vers les lignes concernées :
