Fade-In with Scroll Event

[nilsw]

Does anyone know how to fade in content activated by a scroll event? For example on Google image search, when you scroll down the page, the next batch of images fades in only when you scroll to it. Any tips or suggestions greatly appreciated.

[thomas]

I’m not seeing a fade effect when looking through Google’s image search results. However, they are using Ajax calls to load the images as you scroll down the page.

Perhaps jQuery’s scroll() method can help you.

[clokey2k]

I tried to recreate Mashables ‘next page’ widget, where a message would scroll in when you reach the bottom of the article.

I use jQuery to find the offset of the target (an element after the article). Every time the ‘$(window).scroll()’ event is fired compare the values between my offset and the window ‘scrolltop()’. There are a few notes about fluid layouts and accounting for window height but the shell is there.

Maybe that could help?
http://clokey2k.com/blog/2011/09/08-mashables-cool-next-post-widget/

[nilsw]

Maybe it is the Ajax calls that is providing the effect on Google?

[clokey2k]

It is definitely an AJAX call to load the extra content, but it needs to be triggered when you reach the bottom. So:

1. User reaches bottom of page/article, triggers AJAX function to load ‘more’ (could use the trigger in my example)
2. AJAX loads the next set of content and then triggers the element to be added to the page (look for a quick tutorial on jQuery’s ‘$.load()’)
3. Once added to the page the ‘fade in’ effect is triggered (jQuery is a win on that too!)

[nilsw]

sweet, thanks for the assistance clokey2k

[Author]

Posts