到达滚动点后如何播放动画？答案

【问题标题】：How to play animation when after scroll point is reached?到达滚动点后如何播放动画？
【发布时间】：2014-07-20 02:50:10
【问题描述】：

我刚看到http://www.archer-group.com/approach

这让我想制作这样的作品集动画。当用户将动画滚动到指定的滚动区域/部分时播放动画。当您向下滚动到第 3 步、第 4 步和第 5 步时，动画会在从滚动视图部分向上或向下滚动时再次播放和重置。

我看到了 flickr.com 网站，动画看起来不同，因为他们正在播放视频而不是像 archer-group.com 这样的图形动画（可能是 css）。

所以我在下面有这段代码，我试图延迟动画，直到我将页面滚动到该动画部分。任何人都可以显示一个简单的代码来做到这一点。提前致谢。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

/* Standard syntax */
@keyframes myfirst {
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
</style>
</head>
<body>
<br>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br>

<p><b>Note:</b> This example </p>
<p><b>Note:</b> This is a sample text.</p>

<div></div>

</body>
/html>

【问题讨论】：

关于这个主题有很多 SO 问题。您需要使用 javascript 和页面的滚动事件。在询问之前尝试googling

标签： javascript css html animation

【解决方案1】：

所以基本上这可以实现我跟踪scrollTop，然后在回调函数中使用if 语句来播放动画/使元素可见。

例如：

$(function () {

    var $window = $(window);

    $window.scroll(function (event) {
        var scrollTop = $window.scrollTop();

        if (scrollTop < 400)
           console.log("hi");
    });
});

【讨论】：

@ZachSaucier 为什么会这样？
因为内容并不总是从一开始就在页面下方 400 像素处