treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Scroll to fade in

  • Hi, I was just wondering how Apple have done the "slide-in-image-when-scroll-to" on the iPod nano page. 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
    }
    
  • Yes, that's usually the way to go. If you take a look at Skive Festival 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);
    
  • Ok, thanks. I will give that a try!