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!
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?
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:
Ok, thanks. I will give that a try!