웨이 포인트로 addClass 및 removeClass 트리거

Question

나는 수평 시차 스크롤러 인 웹 사이트를 만들고 있습니다. 내 의도는 불투명도를 변경하면서 그라디언트 (div 100vw, 300vh)를 위아래로 움직여서 새벽부터 밤까지 환경 효과를 얻는 것입니다. 특정 div가 뷰포트에 오면 자바 스크립트가 원하는 동작을 트리거하기를 원합니다.

jquery, Waypoints 및 jInvertScroll을 사용하고 있습니다.

나는 콘솔에서이 얻을 :

<div class="dawndusk"></div> 모든 것이 시작입니다. <div class="dawndusk lettherebenight"></div>#dawn으로 스크롤하면 다른 div로 스크롤하면 아무 것도 바뀌지 않습니다. 왜? 내가 원하는 클래스가 오프 트리거 어떻게합니까

$('#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'); 
    } 
}); 

을 :

이

이것은

.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); 
} 

자바 스크립트가 이런 식으로 내 CSS 내 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> 

입니다 내가 원할 때?

Answer 1

나는 그것을 스스로 알아 냈습니다.

jInverttscroll은 수직 스크롤에서 수평 스크롤을 대신합니다. 모든 것이 화면과 코드에서 괜찮은 것처럼 보였지만, 문제는 웨이 포인트 트리거가 모두 가로 축에 배치된다는 것입니다. 그것은 수직축에 있다고 가정했다.

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