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.

You can determine whether an HTML element is visible on a page using JQuery, and call any function as soon as it becomes visible: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — Anderson Green, Feb 20 '13 at 18:58

score 9 · Accepted Answer · answered May 01 '10 at 17:09

9

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

answered May 01 '10 at 17:09

Vincent

3,784
2
20
29

Thanks, I figured it was something like "delay load" and "lazy load" it is :) – Mahmoud Al-Qudsi May 01 '10 at 17:33

score 1 · Answer 2 · answered May 11 '10 at 12:01

1

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

answered May 11 '10 at 12:01

RRG

457
5
18

score 1 · Answer 3 · edited Apr 01 '12 at 13:40

1

There is a jQuery version of lazyload too.

edited Apr 01 '12 at 13:40

alain.janinm

19,035
10
56
103

answered Jan 04 '11 at 23:33

murrydan

11
1

score 1 · Answer 4 · answered Aug 31 '11 at 17:36

1

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

answered Aug 31 '11 at 17:36

Tárcio Zemel

501
6
24

score 0 · Answer 5 · answered Sep 05 '10 at 19:02

0

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

answered Sep 05 '10 at 19:02

Drew Noakes

266,361
143
616
705

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

5 Answers5

Linked