animation-timelinemix-blend-modeanimation-range@keyframes
Du texte qui se révèle au défilement de la page, c'est possible en CSS. Nous fusionnons notre texte avec un dégradé linéaire comme arrière-plan via les modes de fusion (Blends modes). Il nous suffit ensuite d'utiliser les animations CSS grâce à l'API CSS scroll-driven. Nous obtenons ainsi ce bel effet d'une manière simple et rapide.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus turpis, maximus ac pellentesque quis, dignissim non neque. Curabitur id sapien a odio ullamcorper tempus. Mauris fermentum commodo quam. Phasellus odio nunc, sollicitudin at turpis vel, mollis maximus ante. Donec fringilla purus sed leo egestas, eget vulputate mauris blandit. Etiam risus lacus, ullamcorper sollicitudin vulputate vitae, malesuada quis velit. Donec mi magna, consectetur non blandit eget, vulputate a est. Nunc id massa efficitur, pellentesque dolor ut, sollicitudin turpis. Vivamus euismod feugiat commodo. Vivamus facilisis, risus non sollicitudin consequat, mauris sapien eleifend elit, vel ullamcorper sapien felis quis odio. Nullam dignissim, felis vehicula luctus pulvinar, ante nisi iaculis justo, a tempus odio massa in velit. Aenean viverra consectetur nisl vel venenatis. Vivamus sagittis pellentesque nisl sit amet dapibus. Vestibulum vestibulum sed elit ut commodo. Proin efficitur porta nisl eget lobortis. Phasellus pulvinar consequat turpis, nec pretium mi consequat eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate erat in malesuada dapibus. Etiam ultricies ex nisi, sit amet porttitor ante efficitur faucibus. Phasellus id pulvinar erat. Vestibulum molestie dolor at cursus tincidunt. Nullam ante diam, lobortis fermentum dolor a, tempor lobortis mauris. Proin feugiat massa quam, at cursus dolor maximus quis. Curabitur tristique et augue sed porta. Duis sit amet velit erat. Vivamus laoreet est et nunc eleifend, at pellentesque tortor sagittis. In tortor sapien, eleifend at vestibulum eu, feugiat non sem. Aliquam erat volutpat. Aliquam iaculis dignissim nibh, sit amet pulvinar nibh pharetra a. Pellentesque vel ullamcorper ipsum, et dapibus leo. Integer elementum augue ipsum, et pharetra justo malesuada vitae. Vivamus est nisi, tristique ut leo vehicula, venenatis ultricies purus. Mauris ante leo, rutrum in ornare aliquet, efficitur non sem. Phasellus eget arcu a sem varius mattis. Donec ac congue libero, sed maximus justo. Aenean ac mollis libero. Maecenas sed justo eget leo hendrerit ornare in nec ligula. Vivamus ac ligula tristique, tincidunt dui vitae, dapibus mi. Mauris a gravida quam. Aliquam pretium sem vitae urna pulvinar tristique. In dapibus molestie fermentum. Integer erat nunc, tincidunt id felis scelerisque, commodo ullamcorper ante. Sed eu nisl nibh. Vivamus est nisi, tristique ut leo vehicula, venenatis ultricies purus. Mauris ante leo, rutrum in ornare aliquet, efficitur non sem. Phasellus eget arcu a sem varius mattis. Donec ac congue libero, sed maximus justo. Aenean ac mollis libero. Maecenas sed justo eget leo hendrerit ornare in nec ligula. Vivamus ac ligula tristique, tincidunt dui vitae, dapibus mi. Mauris a gravida quam. Aliquam pretium sem vitae urna pulvinar tristique. In dapibus molestie fermentum. Integer erat nunc, tincidunt id felis scelerisque, commodo ullamcorper ante. Sed eu nisl nibh.
<body>
<div class="contenu">
<p>...</p>
</div>
</body>
.contenu p {
color:white;
mix-blend-mode: screen;
position: relative;
padding:1rem;
font-size: 1.25rem;
line-height: 1.5lh;
}
.contenu p::after {
background: linear-gradient(transparent, #000 3lh) no-repeat bottom center/100% 100%;
content: "";
position: absolute;
inset:0;
animation: fade both linear;
animation-timeline: scroll();
animation-range: entry 0% exit 100%;
}
.contenu {
max-width: 600px;
margin:auto
}
@keyframes fade {
to {
background-size: 100% 0%;
}
}