Grow your CSS skills. Land your dream job.

Scroll to fade in

  • # December 14, 2012 at 6:32 pm

    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
    }

    # December 15, 2012 at 5:01 pm

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

    # December 16, 2012 at 10:35 am

    Ok, thanks. I will give that a try!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".