在使用整页 js 时，如何在 div 出现时立即将动画（如向左滑动、淡入等）添加到 div？

Question

我正在使用整页 js 创建网页 (link: 'http://alvarotrigo.com/fullPage/' ) 现在，我想要几个 divs 在滚动时显示动画效果。对于普通网站，当我不使用 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 时不起作用，有人可以建议其他方法吗？当我到达那个特定的 section/slide 时，我想要一个 div 滑进来。谢谢！

Answer 1

你可以这样做：

isOnScreen = function(ele){
var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();

var element = $("ele");
var bounds = element.offset();

bounds.right = bounds.left + element.outerWidth();
bounds.bottom = bounds.top + element.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

}

you can find jsfiddle link here :

Answer 2

您在 the examples folder of fullPage.js 中有一个示例。文件名为 "callbacks.html"。查看。

如果你想用 CSS 来解雇他们，你可以使用 fullPage.js callbacks to fire them, or even to the state classes added to the body element。

也检查this example regarding the fullPage.js callbacks

在使用整页 js 时，如何在 div 出现时立即将动画（如向左滑动、淡入等）添加到 div？

While using full page js how to add animations (like slide in left, fade in etc) to div as soon as they are in view?

javascript

css

jquery

jquery-animate

fullpage.js