Question

我正在使用单页滚动布局的网站上工作。我正在使用jquery.onepage-scroll.js库进行布局。我想在滚动不同部分的同时添加动画。我尝试使用waypoints库来实现相同的但问题是当我滚动页面时事件没有触发，而是当我点击Chrome中的“Inspect element”时，只有那个与航点关联的事件（在我的情况下，该事件是警报消息）被解雇。我无法弄清楚这里的确切问题。

以下是我的网页结构：

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

以下是我如何将一个警报与航点功能相关联，以检查它是否有效：

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

Answer 1

我认为Waypoint和jquery.onepage-scroll.js插件之间存在冲突。如果我是你，我会切换到一个有更多选项的插件，我使用了FullPage.js

有更多选项，您可以执行任何您想要的操作，例如this，您可以在其中添加自定义动画。

一旦您滑动到cetain页面，就可以使用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");
        }

希望有所帮助。

Answer 2

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

您可以在窗口中标记可见时获取动画。您可以在animate.css中检查动画效果。

这里是jsfiffle demo

航点js没有按预期工作

2 个答案: