Cortez! Afficher des images au scroll

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.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro pariatur ullam eveniet, placeat atque, ex laboriosam rerum, obcaecati provident adipisci fugit repellendus perferendis harum incidunt velit doloribus earum nulla consectetur?

Cet exemple peut être modifié en attribuant à chaque image un positionnement spécifique. Voir ici la version alternative. Cortez!

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.