Question

我刚看到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>

Answer 1

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

例如：

$(function () {

    var $window = $(window);

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

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

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

1 个答案: