这些元素如何在这个网站上淡出？

Question

这些网站如何实现淡化效果？

请仔细注意本网站：

http://blog.insicdesigns.com/2010/06/best-html5-media-player-implementations/

向下滚动时，您会看到图像/视频等的淡化效果。它只发生一次。任何人都可以告诉我这是怎么做到的？

感谢。

Answer 1

看起来这是用jQuery和lazyload jQuery插件完成的。该插件可在此处获取：http://www.appelsiini.net/projects/lazyload

使用起来非常简单，您可以使用类.lazy标记要加载的所有图像。然后你使用它来“选择”那些标记的图像，插件完成繁重的工作。你必须包含jQuery库文件和带有<script>标签的插件文件，然后一个简单的脚本开始它：

jQuery(".lazy").lazyload({ 
    placeholder : "http://mysite.com/placeholder.gif",
    effect : "fadeIn"
});

这会将占位符图像放入，直到您滚动到视图，并使用淡入淡出效果显示图像。

Answer 2

看起来他们正在使用jQuery LazyLoad插件来实现此效果。