从视口底部延迟JavaScript XX像素

我已经看到了一些关于如何在CSS中延迟动画的答案，但我希望用Javascript来实现

我有一个动画，在页面加载后立即激活。该网站是一个单一的页面，我希望动画激活时，客户端滚动到该部分。我听说可以通过从视口底部激活动画X像素来实现这一点

---

谢谢

这里有点夸张，但它应该能为您提供您想要实现的目标所需的所有概念

基本上，您可以测试要开始动画的点是否位于屏幕的矩形内，并使用一个标志来防止动画在进入该区域后在每个滚动中重复自身

// teach JavaScript about coördinates
function CoOrdinate(x, y) {
    this.x = x;
    this.y = y;
}
CoOrdinate.prototype.inside = function (A, D) {
    if (this.x < A.x || D.x < this.x) return false;
    if (this.y < A.y || D.y < this.y) return false;
    return true;
}
// write a factory for the flag + action test
function actionFactory(hotspot, action) {
    var flag_done = false,
        test = function (topleft, bottomright) {
            if (flag_done) return; // cancel if we've done it before
            if (hotspot.inside(topleft, bottomright)) {
                flag_done = true;
                action();
            }
        };
    return test;
}
// create your action with the factory
var someAction = actionFactory(
        new CoOrdinate(0, 100), // the coördinate to be in the screen
        function () {console.log('foo')} // pass animation invocation here
    );
// so far none of this is getting invoked, so
// make the stuff all work when the page is scrolled
window.addEventListener('scroll', function () {
    var x = window.pageXOffset,
        y = window.pageYOffset,
        h = window.screen.availHeight,
        w = window.screen.availWidth;
    someAction(
        new CoOrdinate(x    , y    ),
        new CoOrdinate(x + w, y + h)
    );
});

//教JavaScript如何协调
函数坐标（x，y）{
这个.x=x；
这个。y=y；
}
CoOrdinate.prototype.inside=函数（A，D）{
如果（this.x

如果协调人

[01100]

在屏幕中，上面的示例只会记录

“foo”

。

签出或。我想这正是你想要的是你想要的？在那个例子中，动画是基于锚元素的，但是这很容易改变——例如，基于50%页面高度的滚动。