javascript - 根据 y 轴激活动画

Question

对不起，这个问题非常初学者。我只是不知道从哪里开始我希望得到一些提示。

一旦用户位于网页的某个部分，我需要启动动画。我可以通过这样做找到坐标

$("body").click(function(event){
   alert("this is the x coordinate: "+event.pageX);
   alert("this is the y coordinate: "+event.pageY);

});

有人可以向我展示一个我可以做什么的示例，以便当用户滚动到动画开始的坐标 y 1254 时？我还找到了 viewport.js 但文档只显示了一个非常可怕的例子

这是我尝试做的，但它似乎根本不起作用

$(".second-image:in-viewport").css({marginLeft:'-999px'}).animate(
        {marginLeft:'0px'}, {duration:2000});

我似乎无法将 console.log 与视口一起使用。

Answer 1

您需要检查页面滚动，然后在滚动时检查您是否离页面顶部太远或元素是否可见。

试试这个 jsfiddle： http: //jsfiddle.net/LVrch/ 缩小结果窗口，所以你必须滚动一下。

这是jQuery：

$(document).scroll(function () {
    if ($(window).scrollTop() >= 200) {
        $(".second-image").animate({
            marginLeft: '230px'
        });
    }
});