$(document).ready(function(){
    const poubelle = document.getElementById('imgimp1');
    const gaz = document.getElementById('imgimp2');
    const champs = document.getElementById('imgimp3');

    function RefreshScrollPosition(position) {
        
        poubelle.style.transform = `translateX(${(Math.min(500, Math.max(0, position - 150))*-1)}px)`;
        gaz.style.transform = `translateX(${Math.min(500, Math.max(0, position - 750))}px)`;
        champs.style.transform = `translateX(${(Math.min(500, Math.max(0, position - 1400)))*-1}px)`;

    }

    RefreshScrollPosition(0);
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        RefreshScrollPosition(scrollTop);
    });


    $("#tips").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#tips").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});    
    $("#impacts").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#impacts").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});    
    $("#campagnes").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#campagnes").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});   
});