Question

我想知道这项技术是如何在JavaScript中完成的。当我向下滚动页面时，如下所示：https://www.shift.agency，当div在视口中时，内容将从下到上进行动画制作。

我认为代码应该知道以下内容：

目标元素的高度
每个部分的开始位置
相对于窗口视口的滚动位置

我认为我应该使用偏移来获得元素的高度？如果我是对的，我想出了基础知识：

// Scroll function
$(window).scroll(function() {

            var windowPos = $(window).scrollTop();
            console.log(windowPos);
            $('.main section').each(function() { 
                var el = $(this);

            });

        });

直播代码：http://codepen.io/anon/pen/EPgaoq

Answer 1

有一些搜索字词可以帮助您实现目标。我看到您链接的网站上发生了两个主要影响。

视差

第一个效果称为视差 - 它是一种视觉效果，可为您的元素提供人工深度。它使用的概念是，当透视点垂直变化时，距离您更近的物体将比远处的物体更快地向上移动。有很多jQuery插件可以帮助你熟悉这个效果。最容易访问的可能是skrollr（https://github.com/Prinzhorn/skrollr）

航点

第二个效果是当你到达某个滚动点时div显示动画到屏幕上的效果。这是通过观察触发元件的滚动位置和偏移位置直接完成的。同样有很多jQuery插件可以帮助配置它并自动化该过程。一个相当容易实现的是jQuery Waypoints（https://github.com/imakewebthings/waypoints）。

检查出来，希望你能走正确的道路:)祝你好运。

Answer 2

正如许多人提到的，你可以使用像waypoint或skrollr这样的东西。如果你在页面滚动到视口时寻找动画我会建议检查wow.js因为skrollr非常深入。 http://mynameismatthieu.com/WOW/。示例网站使用类似于您在wow.js中可以执行的功能，添加以下代码：

<div class="wow fadeInUp"></div>

如何在滚动中为div设置动画？

2 个答案:

视差

航点