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

Question

Hi,

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

is there a prototype + scriptaculous equivalent?

Answer 3

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

Answer 4

A YUI version is available too. In fact, Lazy Load was inspired by it.