↓ Scrollez pour faire défiler · 5 images
/00 — Brief
Le carrousel scroll-jacké épingle une section en plein écran pendant que les images défilent horizontalement, au rythme du scroll vertical. Idéal pour un diaporama séquentiel qui raconte une histoire, comme dans le dossier Ghana ou Ukraine. Aucune librairie, juste du vanilla JS et un peu de CSS.
/01 — Intégration
La structure .ll-scroll-carousel avec ses slides, le compteur et la barre.
Importez outil.css et carousel-scroll.js, ou copiez-les dans vos dossiers /css et /js.
Glissez vos visuels à la place des placeholders. Le script gère le reste tout seul.
/02 — Personnalisation
Le nombre de slides est automatique. Les couleurs, la position du compteur et la légende
passent par les variables CSS du projet. Sur mobile et en prefers-reduced-motion,
le composant bascule seul en scroll-snap horizontal natif : le doigt ne pardonne
pas le scroll-hijacking, donc on ne le force pas.
/03 — Sous le capot
La hauteur de la section est calculée en JS pour autoriser N écrans de défilement.
Le suivi du scroll passe par requestAnimationFrame, la translation par
translate3d pour rester sur le GPU. Compteur et progression sont synchronisés
sur la même boucle. Tout est framework-agnostic et réutilisable d'un dossier à l'autre.