javascript - 在使用整页 js 时如何将动画(如向左滑动、淡入等)添加到 div 中？

Question

我正在使用整页 js 创建网页(链接:“http://alvarotrigo.com/fullPage/”)现在，我想要一些 div 在滚动时显示动画效果。对于普通网站，当我不使用 fullpage.js 时，使用以下代码很容易实现:

JQuery:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function(){
    if (isScrolledIntoView('.class') === true) {
        $('.class').addClass('in-view')
    }
});

CSS:

.class {
    opacity: 0;
}
.class.in-view {
    opacity: 1;
}

但是这在使用 fullpage.js 时不起作用，有人可以建议其他方法吗？当我到达那个特定的部分/幻灯片时，我想要一个 div 滑入。谢谢!

Answer 1

您在 the examples folder of fullPage.js 中有一个示例.文件名为“callbacks.html”。检查一下。

您可以使用 fullPage.js callbacks解雇他们，甚至是the state classes added to the body element如果你想用 CSS 触发它们。

同时检查 this example regarding the fullPage.js callbacks