Les images sont importantes sur votre site. Pas seulement pour agrémenter votre contenu ou le SEO de votre page mais également pour y donner de la couleur ou un style qui lui appartient. Pourquoi ne pas alors leur donner un effet au scroll ? Je vous donne un exemple pou un effet sympa sur vos images.
Un effet sympa au scroll de la page
Qu’on aime ou nom les effets au scroll de la page, ils restent légions sur la toile. Ici, l’idée n’est pas de moi, mais j’ai trouvé cet effet en étudiant la nouvelle façon de jouer sur des éléments de votre page sans Javascript. (Si si !). Je vous montre ici comment faire, mais comme un exemple vaut mieux qu’une longue explication, allez directement sur mon Codepen pour y voir le code source et ce que cela donne :
See the Pen Untitled by Merlin (@lintermediaire) on CodePen.
Explication
L’animation se réalise grâce aux keyframes habituels de votre CSS.
Là où c’est intéressant, c’est ce qui se passe sur votre classe « revealing-image » (dans ce cas-ci).
Voilà la partie qui nous intéresse :
.revealing-image {
/* Animation css standard */
animation: reveal linear both;
animation-timeline: --revealing-image;
/* Create View Timeline */
view-timeline-name: --revealing-image;
animation-range: entry 25% cover 50%;
/* AXE - block/inline */
view-timeline-axis: block;
}La propriété « animation-timeline » lie l’animation « reveal » à la timeline déclarée plus haut. Ainsi, le déroulement de l’animation est contrôlé par la position de l’élément dans le viewport, et non par le temps. Elle est donc cruciale.
La propriété / valeur « animation-range: entry 25% cover 50%; » indique que l’animation doit commencer quand l’utilisateur arrive à 25% de son apparition et doit être complète au moins à 50% du scroll de sa visualisation sur la page. (c’est-à-dire quand le bas de l’élément a dépassé 50% de la hauteur du viewport). Tout se joue donc ici.
Et enfin, la propriété « view-timeline-axis« quant à elle, indique l’axe de défilement, ce qui est généralement du haut vers le bas et donc en « block« . Mais vous pourriez mettre « inline » pour un axe horizontal.
Conclusion
Sympa non ? D’autres effets similaires se trouvent également sur le site précité. Je vous conseille vivement d’y aller jeter un œil. Et la suite ? La suite serait de créer une classe que vous utiliseriez au sein de votre template ou pourquoi pas une fonction SCSS pour y inclure les données d’entrées et de fins de votre effets visuels… Je vous laisse y réfléchir et prendre note que nous n’avons pas utilisé de Javascript pour écouter le scroll de l’utilisateur, ce qui est tout de même également intéressant !
À très vite.
Sources officielles :
Newsletter
En maintenance ...