Twitter
Partagez cette démonstration : Twitter

Scroll-linked CSS Animations

Dernière modification : juin 2022

Exemple 1 : apparition d'images au défilement



<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>





:root {

--anim-duration: 1s;
}
	
	
@media (prefers-reduced-motion: reduce) {
	:root {
		--anim-duration: 0s; 
	}
}


.article{
	
display:grid;
justify-items:center;
max-width:800px;
height: 80vh;
margin: 0 auto 5rem auto;

}	
	
.article p{
	
padding:1rem;
	
	}
	
	
	
#aaa {

display:grid;
height: 100%;
overflow-y: scroll;
overflow-x:hidden
	
}
	
@supports (animation-timeline:works){


@scroll-timeline aaa-1 {
	
source: selector(#aaa);
start: selector(#aaa-1) end 0;
end: selector(#aaa-1) end 2;
time-range: 1s;
		
	}
		
		
		
		
#aaa-1 {
		
animation-timeline: aaa-1;
	
	}
	
@scroll-timeline aaa-2 {
	
source: selector(#aaa);
start: selector(#aaa-2) end 0;
end: selector(#aaa-2) end 1;
time-range: 1s;
	
	}
	
#aaa-2 {
		
animation-timeline: aaa-2;
		
	}
	
		
@scroll-timeline aaa-3 {
source: selector(#aaa);
start: selector(#aaa-3) end 0;
end: selector(#aaa-3) end 1;
time-range: 1s;
}
	
	
#aaa-3 {
	
animation-timeline: aaa-3;
	
	}
	
	
img {
display: block;
border: 10px solid #fff;
border-radius: .25em;
box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
margin: 2rem auto; 
max-width: 600px;
max-width: 80%;
	}

.img-1{

transform: translateY(50%) rotateZ(0);
animation: var(--anim-duration) anim-1 forwards
	
	
	}
	
	
@keyframes anim-1 {

to {
	transform: translateY(0) rotateZ(-5deg)
		
	}
	
}
	
.img-2{
	
opacity:0;
transform: translatex(-100%);
animation: var(--anim-duration) anim-2 forwards
	
	}

@keyframes anim-2 {

to {
	
opacity: 1;			
transform: translatex(0)
		
}
	}
	

.img-3{
	
opacity:0;
transform: translatex(100%) rotateZ(0);
animation: var(--anim-duration) anim-3 forwards
	
	}
	

@keyframes anim-3 {
		
to {
	
opacity: 1;		
transform: translatex(0) rotateZ(-5deg);
	
		}
	}
	
	
	}


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



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






:root {

--anim-duration: 1s;
}
	
	
@media (prefers-reduced-motion: reduce) {
	:root {
		--anim-duration: 0s;
	}
}


@supports (animation-timeline:works){
	
#progress{

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

}	

@keyframes progress{

to{

transform:scaleX(1)

}


}


@scroll-timeline progress-timeline{

time-range:1s


}

}





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.

haut page