Question

Bro, I am looking for such fade in effect for images while scrolling down the page like this – http://www.google.com/tv/index.html or this http://www.stellamccartney.com/default/shop-products/Dresses
I have heard about Lazy Load plugin, it is loading images while scrolling but I need just fading them in. Any thoughts?

Answer 1

you can quite easily do this yourself.

1. set display: none with jquery for all images (or the images you want to run the effect on), that are not within the $(window).innerHeight (get document scrolling offset with $(window).scrollTop() )

2. add an onscroll listener for the document $(document).onscroll() and use $(element).fadeIn on the image when it scrolls into the viewport.

Do better illustrate the way to script this, the following script is rather a logical concept than a copy/paste template ^^. I haven’t tested this, but it should be a decent guideline.

assuming your images are properly classed like this:

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

your script could read something like this

$('.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);
        });
    });

});