addClass和RemoveClass觸發器與Waypoints

我正在製作一個網站，是水平視差滾動。我的目的是通過在改變不透明度的同時向上和向下移動漸變（div 100vw, 300vh）從黎明到夜間產生環境效果。當某個div來視口時，我希望javascript觸發所需的操作。addClass和RemoveClass觸發器與Waypoints

我正在使用jquery，Waypoint和jInvertScroll。

我得到這個從控制檯：

<div class="dawndusk"></div>當一切都在開始。 <div class="dawndusk lettherebenight"></div>當我滾動到#dawn。當我滾動到其他div時沒有任何變化。爲什麼？

這是我的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>

這是我的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是這樣的：

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

如何獲得想要的類來觸發和關閉當我想要？

來源

2017-09-24 Rautakannel

我想出了自己。 j代表逆轉滾動代表垂直滾動模擬水平滾動。所以雖然在屏幕和代碼上一切都很好，但問題在於航點觸發器全部放置在水平軸上。它應該在縱軸上。

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

來源

2017-09-28 10:42:24 Rautakannel

addClass和RemoveClass觸發器與Waypoints

回答

相關問題