Aller au contenu principal
Partagez cette démonstration :

Scroll-linked CSS Animations

Dernière modification : novembre 2022

Exemple 1 : apparition d'images au défilement

Spécification en cours de réécriture-la démonstration ci-dessous ne fonctionne plus.



<div class=article>
<div id="aaa">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta sodales massa sit amet rutrum. Curabitur a mauris lacus. Sed porttitor, tellus quis fermentum molestie, justo tortor accumsan lectus, sit amet porttitor sem sem non elit. Aenean sit amet elit eros.</p>
...
<img id="aaa-1" src="image.jpg" alt class="img-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta sodales massa sit amet rutrum. Curabitur a mauris lacus. Sed porttitor, tellus quis fermentum molestie, justo tortor accumsan lectus, sit amet porttitor sem sem non elit. Aenean sit amet elit eros.</p>
...
<img id="aaa-2" src="image.jpg" alt class="img-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta sodales massa sit amet rutrum. Curabitur a mauris lacus. Sed porttitor, tellus quis fermentum molestie, justo tortor accumsan lectus, sit amet porttitor sem sem non elit. Aenean sit amet elit eros.</p>
...
<img id="aaa-3" src="image.jpg" alt class="img-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta sodales massa sit amet rutrum. Curabitur a mauris lacus. Sed porttitor, tellus quis fermentum molestie, justo tortor accumsan lectus, sit amet porttitor sem sem non elit. Aenean sit amet elit eros.</p>
...
</div>
</div>





/*spécification en réécriture-la démo ne fonctionne plus*/


Exemple 2 : défilement de l'indicateur de progression

La démonstration ci-dessous fonctionne avec la nouvelle spécification.



<div id="progress">
</div>






/*nouvelle notation*/@supports (animation-timeline: scroll()) {
	


#progress{
animation: anim-duration 1s linear;
animation-timeline: scroll();
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:4px;
transform-origin: 0 0;
background-color:#6753ea
	
	}	

@keyframes anim-duration {

	from {transform:scaleX(0);
		
	}
	to {
		transform: scaleX(1);
	}
}
	
}




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.