帶有 wow.js 動畫的 fullPage.js

Question

我正在使用完整的頁面和哇插件制作我的第一個網站。 我的問題是頁面向下滾動后沒有加載哇動畫。 我試圖在加載頁面后向 div 添加動畫類，但它不起作用。 任何想法如何正確地做到這一點？ 這是我的代碼初始化插件

  <script>
        $(document).ready(function() {
           $('#fullpage').fullpage({
              'afterLoad': function(anchorLink, index){
                 if(index == '2'){
                    $('#animation_content').addClass('wow lightSpeedIn');
                 }
              },
           });
        });
        new WOW().init();
    </script>

Answer 1

Wow.js 依賴於scroll事件。

Fullpage.js 不會真正滾動頁面（觸發滾動事件），除非您使用選項autoScrolling:false或scrollBar:true如fullpage.js 的常見問題解答中所述。

如果你仍然想在沒有任何這些選項的情況下使用 wow，唯一的解決方案是嘗試使用onLeave的afterLoad或onLeave回調來添加 wow.js 工作所需的類或數據。

這是 fullpage.js github 論壇中關於它的一個主題： https : //github.com/alvarotrigo/fullPage.js/issues/249

您還可以查看我關於如何使用 fullpage.js 狀態類創建 CSS 3 動畫的視頻教程。

Answer 2

使用這個： scrollBar:true 在設置中，然后在你的 CSS 集中

body,html{
    overflow: hidden !important;
}

然后 wow.js 會工作，你不會看到你設置為 true 的 scrollBar :) MAGIC