How to do the image fade-in effect upon scroll (like mashable.com)

Question

I'm wondering about the fade-in effect for images on mashable.com (see http://mashable.com/2009/08/14/google-android-logo-remixes/ for example)

As you scroll to the image, it fades in. It's not fading in on page load, only upon the actual appearance of the item on-screen.

Thanks.

Answer 1

It's achieved with the jQuery plugin Lazy Load.

EDIT: Here's the code they used:

if(! navigator.userAgent.toLowerCase().match('ipad')){
  $('#primary img').lazyload({effect:'fadeIn',placeholder:'/wp-content/themes/v6/_base/img/blank.png'});
}

Answer 2

Found the mootools version of the lazyload http://davidwalsh.name/mootools-lazyload

Answer 3

Unfortunatelly, the Lazy Load plugin not works in most actual browsers, according the own author says in the official web site.

But the jQuery Appear Plugin do almost the same thing! ;-)

Answer 4

There is a jQuery version of lazyload too.