Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Autres

Scroll-linked CSS Animations

Si la démonstration ne fonctionne pas, activez la fonctionnalité : Experimental Web Platform features.

Votre navigateur ne prend pas en charge cette démonstration. Chrome uniquement.

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.

Aliquam pretium id purus quis facilisis. Curabitur euismod elit ut quam convallis sagittis. Fusce at scelerisque dui. Mauris vel nisl nec leo eleifend blandit id eu erat. Nam egestas, odio non blandit blandit, risus ex aliquet enim, sit amet auctor odio purus vulputate nulla. Duis in pulvinar dolor. Donec id mollis erat.

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.

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.

Aliquam pretium id purus quis facilisis. Curabitur euismod elit ut quam convallis sagittis. Fusce at scelerisque dui. Mauris vel nisl nec leo eleifend blandit id eu erat. Nam egestas, odio non blandit blandit, risus ex aliquet enim, sit amet auctor odio purus vulputate nulla. Duis in pulvinar dolor. Donec id mollis erat.

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.

Aliquam pretium id purus quis facilisis. Curabitur euismod elit ut quam convallis sagittis. Fusce at scelerisque dui. Mauris vel nisl nec leo eleifend blandit id eu erat. Nam egestas, odio non blandit blandit, risus ex aliquet enim, sit amet auctor odio purus vulputate nulla. Duis in pulvinar dolor. Donec id mollis erat.

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.

Aliquam pretium id purus quis facilisis. Curabitur euismod elit ut quam convallis sagittis. Fusce at scelerisque dui. Mauris vel nisl nec leo eleifend blandit id eu erat. Nam egestas, odio non blandit blandit, risus ex aliquet enim, sit amet auctor odio purus vulputate nulla. Duis in pulvinar dolor. Donec id mollis erat.

Code :

HTML


<div class=article>
<div id="aaa">
<p class=compatibilite>Votre navigateur ne prend pas en charge cette démonstration</p>
<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>
<p>Aliquam pretium id purus quis facilisis. Curabitur euismod elit ut quam convallis sagittis. Fusce at scelerisque dui. Mauris vel nisl nec leo eleifend blandit id eu erat. Nam egestas, odio non blandit blandit, risus ex aliquet enim, sit amet auctor odio purus vulputate nulla. Duis in pulvinar dolor. Donec id mollis erat.</p>
<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>
<p>Aliquam pretium id purus quis facilisis. Curabitur euismod elit ut quam convallis sagittis. Fusce at scelerisque dui. Mauris vel nisl nec leo eleifend blandit id eu erat. Nam egestas, odio non blandit blandit, risus ex aliquet enim, sit amet auctor odio purus vulputate nulla. Duis in pulvinar dolor. Donec id mollis erat.</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>
<p>Aliquam pretium id purus quis facilisis. Curabitur euismod elit ut quam convallis sagittis. Fusce at scelerisque dui. Mauris vel nisl nec leo eleifend blandit id eu erat. Nam egestas, odio non blandit blandit, risus ex aliquet enim, sit amet auctor odio purus vulputate nulla. Duis in pulvinar dolor. Donec id mollis erat.</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>
<p>Aliquam pretium id purus quis facilisis. Curabitur euismod elit ut quam convallis sagittis. Fusce at scelerisque dui. Mauris vel nisl nec leo eleifend blandit id eu erat. Nam egestas, odio non blandit blandit, risus ex aliquet enim, sit amet auctor odio purus vulputate nulla. Duis in pulvinar dolor. Donec id mollis erat.</p>
</div>
</div>


CSS


: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 {
position:relative;
display:grid;
height: 100%;
overflow-y: scroll;
overflow-x:hidden
	
}
	
	
#aaa::after{
	
content:'';
position:sticky;
right:0;
height:50px;
bottom:0;
left:0;
background-image:linear-gradient(rgba(255,255,255,0),white)
	
	}
	


@supports (animation-timeline:works){

.compatibilite{display:none}
	

@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 {
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);
	
		}
	}
	
	
	}




Support navigateurs :

CSS @scroll-time

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

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.