Dans le HTML, une section .images contient des images qui
disposent chacune d’un id. Au sein du texte sont intégrés
des éléments span dont l’attribut rel permet
de les “lier” à l’id d’une image.
En CSS, la section .images est positionnée de manière fixe.
La section .text est décalée de la même dimension que la
largeur de .images. Les images
de la section .images sont masquées par défaut, mais une
class .visible va permettre de les afficher.
En javascript, on observe la visibilité des span dans le
viewport, et s’ils sont visibles (= qu’ils intersectent la zone
du viewport), on ajoute la class .visible à l’image à
laquelle ils sont liés.
Dans cet exemple, les span sont rendus var des blocs noirs, mais il est évidemment possible de les laisser vides et sans styles.
Cet exemple peut être modifié en attribuant à chaque image un positionnement spécifique. Voir ici la version alternative.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia nobis magnam quod totam voluptatibus culpa quibusdam quo numquam quas ea, aperiam, saepe porro natus sequi facilis eos. Magni, nulla odit!
Aperiam, molestiae possimus aliquam fugiat iusto officia sapiente! Velit magni fugit mollitia numquam officiis beatae in eius est, hic nulla earum, ex inventore odit! Sed inventore in eos? Aut, excepturi.
In dignissimos qui odio alias dolor id magni quasi animi quam molestias vel, ex tempora sint dolorem eligendi velit ab consequuntur suscipit unde commodi dolore asperiores! Eaque enim culpa ratione?
Voluptates a sequi aliquid recusandae ullam voluptatem possimus consectetur libero aliquam, itaque ipsam culpa voluptatibus est corrupti iure reiciendis explicabo nihil adipisci, maxime repellendus expedita labore officia! Neque, ex voluptate.
Earum enim temporibus rerum sit. Doloribus nemo alias culpa totam, eaque cupiditate blanditiis quasi facere, consectetur sit natus similique ducimus tempore corrupti vel voluptates reiciendis. Iure ullam laudantium illum veniam!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia nobis magnam quod totam voluptatibus culpa quibusdam quo numquam quas ea, aperiam, saepe porro natus sequi facilis eos. Magni, nulla odit! Aperiam, molestiae possimus aliquam fugiat iusto officia sapiente! Velit magni fugit mollitia numquam officiis beatae in eius est, hic nulla earum, ex inventore odit! Sed inventore in eos? Aut, excepturi.
In dignissimos qui odio alias dolor id magni quasi animi quam molestias vel, ex tempora sint dolorem eligendi velit ab consequuntur suscipit unde commodi dolore asperiores! Eaque enim culpa ratione? Voluptates a sequi aliquid recusandae ullam voluptatem possimus consectetur libero aliquam, itaque ipsam culpa voluptatibus est corrupti iure reiciendis explicabo nihil adipisci, maxime repellendus expedita labore officia! Neque, ex voluptate.
Earum enim temporibus rerum sit. Doloribus nemo alias culpa totam, eaque cupiditate blanditiis quasi facere, consectetur sit natus similique ducimus tempore corrupti vel voluptates reiciendis. Iure ullam laudantium illum veniam!