如何从apple.com/ipod-nano重新创建图像滑入效果

Question

我注意到苹果网站上有一个很棒的滑入效果。当您向下滚动页面时，图像变得可见(滑入视图)。http://www.apple.com/ipod-nano

我正在尝试分离涉及到的关键脚本。我将nano页面代码带入dreamweaver进行调查。它看起来像是一个与-webkit- onscroll修饰符组合在一起的自定义Javascript CSS事件。

问题是有太多链接的.js文件，以至于我很难在杂乱中看到涉及到的关键代码。有许多链接的页面，我相信只是照顾到流畅性和次要的细节。

要重新创建此功能，我需要做些什么？任何提示都是非常感谢的。

Answer 1

在jQuery中，最简单的方法是使用.scrollTop()跟踪窗口的滚动位置，并使用.offset().top将其与DOM元素的位置进行比较。

当它们相等时，DOM元素到达了浏览器窗口的顶部。或者，您可以添加固定数量的像素或$(window).height()来检测它何时刚进入视线。

http://jsfiddle.net/mblase75/LtMgP/ --滚动页面并观察单词"marker"，它将在页面的中途从黑色切换为蓝色。代码：

$(window).on('scroll', function() {
    if ($(window).scrollTop() > $('p').offset().top-100) {
        $('p').css('color','blue'); 
    };
});​