ou_atterrir_front/background.js

// grain
grained('#grain-bg', {
    animate: true,
    patternWidth: 100,
    patternHeight: 100,
    grainOpacity: 0.5,
    grainDensity: 1,
    grainWidth: 1,
    grainHeight: 1,
    grainChaos: 10,
    grainSpeed: 1
});

/* 
|O couleur prev      O  |
|     couleur d'appoint |
|                       |
|                       |
|                       |
|        couleur next  O|
*/

//  au clic sur le mode suivant :
//  - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante)
//  - couleurs next (ou prev) est une nouvelle couleur
//  - couleur appoint s'adapte en fonction de couleur next


let pageAmount = 0;
let currentPage = 1, prevPage;

document.querySelectorAll('.mode').forEach(function(node, index) {
    pageAmount++;
    node.addEventListener('click', function() {
        document.querySelectorAll('.active').forEach(function(el) {
            el.classList.remove('active'); 
        });
        node.classList.toggle('active');
        prevPage = currentPage;
        currentPage = index + 1;

        console.log(currentPage, prevPage);

        if (currentPage != prevPage) {
            if (currentPage > prevPage) {
                couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1);
                couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage);
            } else {
                couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1);
                couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage);
            }
            couleurs.appoint.h = couleurs.next.h + 200;
            console.log(couleurs.prev.h, couleurs.next.h);
    
            let mainContainer = document.getElementById('BG_BG_BG');
            let containerTmp = document.getElementById('BG_BG_BG_tmp');
            containerTmp.style.background = `
            radial-gradient(circle at 0% 14%, 
                    hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
                    rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle at 93% 95%,
                hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
                rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle at 73% 10%,
                hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
                rgba(255, 255, 255, 0) 100%)
            `;
            containerTmp.style.opacity = 1;
            setTimeout(function() {
                mainContainer.style.opacity = 0;
            },100);
    
            setTimeout(function() {
                mainContainer.style.background = `
                radial-gradient(circle at 0% 14%, 
                        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
                        rgba(255, 255, 255, 0) 100%),
                radial-gradient(circle at 93% 95%,
                    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
                    rgba(255, 255, 255, 0) 100%),
                radial-gradient(circle at 73% 10%,
                    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
                    rgba(255, 255, 255, 0) 100%)
                `;
                containerTmp.style.opacity = 0;
                mainContainer.style.opacity = 1;
            }, 500);
        }

    })
});

let couleurs = {
    prev: {
        h: 42,
        s: 40.6,
        l: 44.9 + 20,
    },
    next: {
        h: 0,
        s: 30.5,
        l: 46.3 + 20,
    },
    appoint: {
        h: 0,
        s: 66,
        l: 35.7 + 20,
    }
}

couleurs.next.h = couleurs.prev.h + (360 / pageAmount);
couleurs.appoint.h = couleurs.next.h + 200;
console.log(couleurs.prev.h, couleurs.next.h);

let container = document.getElementById("BG_BG_BG");
container.style.background = `
radial-gradient(circle at 0% 14%, 
        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
        rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 93% 95%,
    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
    rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 73% 10%,
    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
    rgba(255, 255, 255, 0) 100%)
`;