Création d’une galerie d’images coulissante activée par défilement

Ajouter deux blocks avec vos images à l’intérieur et prévoir plus large pour le mouvement dans une div avec une classe (ici .magic) qui sera en overflow hidden.

Ensuite décaler votre deuxième div avec un margin de -800px (à adapter selon les besoins).

Vous aurez ensuite besoin d’un code élément avec code (attention à bien remplacer par votre classe la div parente)

var ready = (callback) => {
    if(document.readyState != "loading") callback();
    else document.addEventListener('DOMContentLoaded', callback);
}

ready( () => {
    document.addEventListener( 'scroll', throttle( scrollAction, 10 ) );
})

function throttle( callback, limit ) {
    let waiting = false;
    
    return function() {
        
        if( !waiting ) {
            
            callback.apply(this.arguments);
            waiting = true;
            setTimeout( function() {
                waiting = false;
            }, limit);          
        }       
    }
}

function scrollAction() {
    
    let container = document.querySelector('.magic');
    let firstRow = container.querySelector('div:first-child');
    let secondRow = container.querySelector('div:last-child');
    
    firstRow.style.transform = `translateX(-${this.scrollY}px)`;
    secondRow.style.transform = `translateX(${this.scrollY}px)`;
    
}