Question

当你转到this site时，当你向下滚动页面时，你会看到这些项目有一些很好的效果。我怎么能这样做？

我知道如何处理jQuery或CSS效果但是如何在向下滚动页面时激活这些效果？

Answer 1

通常是CSS3 transitions.

当用户在页面上滚动时，它们应用到元素。

你可以：

自己编写CSS3过渡
使用具有预制转换类的库，例如此Animate.css

Answer 2

这种效果是通过CSS3 Transitions和变换实现的。几周前，我实际上正在查看这个问题，并在我的网站上实现了它。这是一个简单的教程，可以立即为您提供所需的结果：Python Database API Spec

基本上它是如何工作的，你有2个脚本，animate.css＆amp; viewportchecker.js。 Animate.css包含所有那些很酷的转换的样式，如淡入，滑出等。另一方面，viewportchecker.js包含一个脚本，用于确定当前正在查看哪些DOM元素。

将两者组合在一起，以便动态地将css类添加到视图中的元素。

<link rel="stylesheet" type="text/css" href="animate.css" />
<script src="jquery.js"></script>
<script src="viewportchecker.js"></script>
<script src="jquery.js">
$(document).ready(function() {
    $(.animated-element).addClass("hidden").viewportchecker({
        classToAdd: "visible animated fadeIn", //class to add to elements when they are in view
        offset: 100 // duration of transition in milliseconds
    });

});
</script>

向下滚动时效果很好

2 个答案: