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

javascript animation fade effect
Mahmoud Al-Qudsi picture Mahmoud Al-Qudsi · May 1, 2010 · Viewed 22.4k times · Source

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

Vincent picture Vincent · May 1, 2010

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

Related questions

How to remove a div with fade out effect in JavaScript?

I want to remove a div element on click event but i want to remove it with a fade out effect. I have got some JQuery solution but i need pure JavaScript or css solution. document.querySelector('.list').addEventListener("…

Read More
CSS Animation onClick

How can I get a CSS Animation to play with a JavaScript onClick? I currently have: .classname { -webkit-animation-name: cssAnimation; -webkit-animation-duration:3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes cssAnimation { from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px); } to { -webkit-transform: rotate(0…

Read More
How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations. I need to do something like this... $('#first').animate({ width: 200 }, 200); $('#second').animate({ width: 600 }, 200); but to run …

Read More