Scroll to fade in

[augustskare]

Hi, I was just wondering how Apple have done the “slide-in-image-when-scroll-to” on the [iPod nano page](http://apple.com/ipod-nano/ “iPod nano”). If you scroll doen to “Music. It’s what beats inside”, you can see it in action.

Is it as simple as?

if(scroll down to 500px) {
Fade in element
}

[Ahrengot]

Yes, that’s usually the way to go. If you take a look at [Skive Festival 2012](http://ahrengot.com/work/skive-festival-website-2012/) on my website, you’ll notice a couple of things fade in while you scroll.

Here’s the code to do that:

var boxesShown = false,
gallShown = false;

function handleItemAppearance(e) {
var top = $(this).scrollTop();

if (top >= 400 && !boxesShown) {
boxesShown = true;
// Show boxes
}

if (top >= 1700 && !gallShown) {
gallShown = true;
// Show gallery
}

if (top >= 3000) {
// Show iPhones
$(window).off(‘scroll’, handleItemAppearance);
}
}

$(window).on(‘scroll’, handleItemAppearance);

[augustskare]

Ok, thanks. I will give that a try!

[Author]

Posts