Waypoints js按預期工作

我正在使用單頁滾動佈局的網站。我正在使用jquery.onepage-scroll.js庫進行佈局。我想在不同部分滾動時添加動畫。我試圖使用航點庫實現相同，但問題是，當我滾動頁面時事件不會觸發，而是當我點擊Chrome中的「檢查元素」時，只有與航點相關的事件（在我的情況下，該事件是警報消息）被解僱。我無法弄清楚這裏的確切問題。Waypoints js按預期工作

這裏是我的網頁上是如何構成的：

<div class="main"> 
<section id="page1"></section> 
<section id="page2"></section> 
<section id="page3"></section> 
</div>

這裏是如何我有相關的警報，航點功能只是爲了檢查是否正常工作：

$("section#page2").waypoint(function(){ 
      alert('waypoint ok'); 
     });

來源

2014-04-22 jigargm

我認爲有航點和jquery.onepage-scroll.js插件之間的衝突。如果我是你，我會切換到一個插件有更多的選擇，我用FullPage.js

有更多的選擇，你可以做任何你想要的像this你可以添加自定義動畫。

可以使用afterSlideLoad做任何你想要的，一旦你滑動到頁面某類

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){ 

     //first slide of the second section 
     if(anchorLink == 'secondPage' && slideIndex == 1){ 
      alert("First slide loaded"); 
     } 

     //second slide of the second section (supposing #secondSlide is the 
     //anchor for the second slide 
     if(index == 2 && slideIndex == 'secondSlide'){ 
      alert("Second slide loaded"); 
     }

希望有所幫助。

來源

2014-04-23 15:40:28 Amir5000

非常感謝。你的回答確實幫助我弄清楚了這個問題。 – jigargm

很高興我能幫到你 – Amir5000

 <h1 class="animated" data-animation="fadeInDown" data-revert="fadeOutDown">Some Animation Here</h1>

你可以在窗口中顯示標籤時獲得動畫。您可以在animate.css中檢查動畫效果。

這裏是jsfiffle demo

來源

2014-04-23 12:56:15

Waypoints js按預期工作

回答

相關問題