如何在滚动到另一个部分之前制作动画？

Question

案例很简单：有一个网站有几个版块。所以在每次滚动时，都会出现另一个部分。

现在有些部分可能有一个文本块，它应该以动画形式飞行。

如果没有动画文本块，它应该具有向下滚动的正常行为：

st 滚动应该向下滚动到下一部分。

如果有动画文本块，滚动应按以下顺序：

st 滚动应该使文本块具有动画效果；也留在当前部分
滚动然后向下滚动到下一部分。

有没有简单的方法可以做到这一点？

Answer 1

从 https://github.com/alvarotrigo/fullPage.js#callbacks 取消滚动

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

可以改变onLeave回调参数或方法判断飞文是否存在然后继续下一节，或者飞文需要飞进来取消进入下一节。

Answer 2

除了使用@dieend 命名的回调，这是处理 javascript 动画和动作的最佳方式，您还可以使用 fullpage.js 添加的状态 classes例如添加到活动部分的 active class 或添加到正文的 fp-viwing-x-y。

这样你就可以单独使用 CSS 来处理你的动画了。

您有一个状态列表 classes on the docs

这里a video tutorial介绍如何使用添加到正文的class来创建动画。

如何在滚动到另一个部分之前制作动画？

How to animate things before scrolling to another section?

jquery

fullpage.js