Question

兄弟，我正在寻找这样的淡入效果，同时向下滚动页面 - http://www.google.com/tv/index.html或此http://www.stellamccartney.com/default/shop-products/Dresses 我听说过Lazy Load插件，它在滚动时加载图像，但我只需要将它们淡入。任何想法？

Answer 1

你可以很容易地自己做这件事。

为所有图像（或想要运行效果的图像）设置display：none with jquery，不在$（window）.innerHeight中（使用$（窗口）获取文档滚动偏移量）。 scrollTop（））
为文档$（document）.onscroll（）添加onscroll侦听器，并在图像滚动到视口时对图像使用$（element）.fadeIn。

更好地说明编写脚本的方法，以下脚本是一个逻辑概念，而不是复制/粘贴模板^^。我没有测试过这个，但它应该是一个不错的指南。

假设您的图像被正确归类为：

<img class="classForImagesToApplyTheEffectOn" src="…" />

你的脚本可能会读到这样的内容

$('.ajax_block_product').each(function(index, el) {

    tiles = $(el);
    a = $(el).offset().top + $(el).height();
    b = $(window).scrollTop() + $(window).height();
    if (a > b) $(el).fadeTo(0,0);

    $(window).scroll(function(d,h) {
        tiles.each(function(i) {
            a = $(this).offset().top + $(this).height();
            b = $(window).scrollTop() + $(window).height();
            if (a < b) $(this).fadeTo(500,1);
        });
    });

});

Answer 2

我知道这是旧的，但你现在可以通过jQuery实现这一点：

https://plugins.jquery.com/appear/

查看演示：

http://morr.github.io/appear.html

向下滚动时淡入。怎么样？

2 个答案: