Fade in while scrolling down. How?

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?

I've got a link to a good plugin for this on my blog: http://webdesignrevolution.tumblr.com/post/16106467838/create-killer-scrolling-websites-with-scrollorama — Kyle Macey, Feb 05 '12 at 22:25
Scrollorama (http://johnpolacek.github.com/scrollorama/) yes? It is possible with a help of it fading in elements while scrolling down the page? — Anton, Feb 05 '12 at 22:31

score 1 · Answer 1 · answered Apr 05 '14 at 05:43

1

I know this is old, but you can now achieve this via the jQuery appear:

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

Check out the demo at:

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

answered Apr 05 '14 at 05:43

Tristan Tao

855
11
29

score 1 · Accepted Answer · edited Dec 03 '13 at 10:51

1

you can quite easily do this yourself.

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

});

edited Dec 03 '13 at 10:51

Michael Giovanni Pumo

14,338
18
91
140

answered Feb 05 '12 at 22:34

maddrag0n

459
4
13

O, man, I am not good in jQuery, could you explain it more detail? By the way, here is the link where I am workin on http://layot.prestatrend.com see the images? I need such effect for them, help, please! :) – Anton Feb 05 '12 at 22:38
added an example script, which should be more or less accurate. – maddrag0n Feb 05 '12 at 23:02
1

$(this).fadeIn(2000); and $(this).offset(); refer to the "window" element, not the classForImagesToApplyTheEffectOn – Kyle Macey Feb 05 '12 at 23:11
@KyleMacey: dang, you are right. thx! should've read the code twice before hitting the submit button. – maddrag0n Feb 05 '12 at 23:14
I have such error at Chrome - Uncaught TypeError: Cannot read property 'defaultView' of undefined :( – Anton Feb 05 '12 at 23:26
`` – Anton Feb 05 '12 at 23:34
Oh, I replaced $(window).innerHeight() with $(window).height() - but when page load now you can not see images untill you start scrolling - http://layot.prestatrend.com is there any solution? – Anton Feb 05 '12 at 23:41
Could you see this solution -http://stackoverflow.com/a/5368165/1186095 ? But the matter is still so - Images do not show when page is loading... – Anton Feb 05 '12 at 23:44
Drachenviech - here is what I need exactly - stackoverflow.com/a/5368165/1186095 but when page is load no images are shown only if start scrolling, is there a way to show images in viewport when page is load? – Anton Feb 05 '12 at 23:49
you have to modify the "$(this).css('display', 'none');" part to only hide the images which are initially not in the viewport. – maddrag0n Feb 05 '12 at 23:54
Drachenviech, but how to do this with a help of jQuery? It is very difficult? – Anton Feb 05 '12 at 23:58
@Anton: see edited solution. I did not test it however and you might need to tweak a little here and there. – maddrag0n Feb 06 '12 at 00:26
Anybody give me whole example of this ? – Vijay Barbhaya Apr 05 '14 at 06:02

Fade in while scrolling down. How?

2 Answers2