déclencheur addClass et removeClass avec Waypoints

Question

Je crée un site Web qui est horizontal parallax scroller. Mon intention est d'avoir un effet environnemental de l'aube à la nuit en déplaçant le gradient (div 100vw, 300vh) de haut en bas tout en changeant l'opacité. Je veux javascript pour déclencher l'action désirée quand un certain div vient à viewport. J'utilise jquery, Waypoints et jInvertScroll.

Je reçois ce de la console:

<div class="dawndusk"></div> quand tout est au début. <div class="dawndusk lettherebenight"></div> lorsque je fais défiler jusqu'à #dawn. Et rien ne change quand je fais défiler vers d'autres divs. Pourquoi?

Ceci est mon HTML

<div class="dawndusk"></div> 

    <div class="flex" id="birth"> 
     ...content... 
    </div> 

    <div class="flex" id="dawn"> 
     ...content... 
    </div> 

    <div class="flex" id="day"> 
     ...content... 
    </div> 

    <div class="flex" id="dusk"> 
     ...content... 
    </div> 

    <div class="flex" id="night"> 
     ...content... 
    </div> 

Ceci est mon CSS

.dawndusk { 
    z-index:750; 
    opacity: .9; 

    background: #4B79A1; 
    background: -webkit-linear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%); 
    background: -olinear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%); 
    background: linear-gradient(to top, #f6d365 0%, #fda085 30%, #283E51 60%, #0A2342 100%); 

    width:100vw; 
    height:300vh; 
    position:fixed; 
} 

#birth, 
#dawn, 
#day, 
#dusk, 
#night { 
position: absolute; 
top:0; 
} 

#birth { 
left:0; 
} 
#dawn { 
left:100vw; 
} 
#day { 
left:200vw; 
} 
#dusk { 
left:300vw; 
} 
#night { 
left:400vw; 
} 

.lettherebebirth, 
.lettherebedawn, 
.lettherebeday, 
.lettherebedusk, 
.lettherebenight { 
    transition: all 4s; 
    -webkit-transition: all 4s; 
} 

.lettherebebirth { 
    opacity: .9; 
    transform: translateY(0); 

} 

.lettherebedawn { 
    opacity: .2; 
    transform: translateY(-200vh); 
} 

.lettherebeday { 
    opacity: 0; 
    transform: translateY(0); 
} 

.lettherebedusk { 
    opacity: .5; 
    transform: translateY(-200vh); 
} 

.lettherebenight { 
    opacity: .8; 
    transform: translateY(-200vh); 
} 

Javascript est comme ceci:

$('#birth').waypoint(function(direction) { 
    if (direction === 'up') { 
    $('.dawndusk').removeClass('lettherebedawn'); 
    $('.dawndusk').addClass('lettherebebirth'); 
    } 
}); 

$('#dawn').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('.dawndusk').removeClass('lettherebebirth'); 
    $('.dawndusk').addClass('lettherebedawn'); 
    } 
}); 

$('#day').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('.dawndusk').removeClass('lettherebedawn'); 
    $('.dawndusk').addClass('lettherebeday'); 
    } 
}); 

$('#dusk').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('.dawndusk').removeClass('lettherebeday'); 
    $('.dawndusk').addClass('lettherebedusk'); 
    } 
}); 

$('#night').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('.dawndusk').removeClass('lettherebedusk'); 
    $('.dawndusk').addClass('lettherebenight'); 
    } 
}); 

Comment puis-je obtenir les classes ont voulu déclencher et désactiver quand je veux?

Answer 1

Je l'ai compris moi-même. JInverser le défilement en imitant le défilement horizontal des défilements verticaux. Donc, même si tout semblait correct à l'écran et sur le code, le problème était que les triggers des waypoints étaient tous placés sur l'axe horizontal. Il était censé être sur l'axe vertical.

#birth { 
     top:0; 
} 
#dawn { 
     top:100vw; 
} 
#day { 
     top:200vw; 
} 
#dusk { 
     top:300vw; 
} 
#night { 
     top:400vw; 
}