I'm wondering about the fade-in effect for images on mashable (see / 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.

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.

• javascript
• animation
• fade
• effect

• 1 You can determine whether an HTML element is visible on a page using JQuery, and call any function as soon as it becomes visible: stackoverflow.com/questions/487073/… – Anderson Green Commented Feb 20, 2013 at 18:58

5 Answers 5

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

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

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! ;-)

There is a jQuery version of lazyload too.

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