Dissolve-in on the Apple home page (what's that called?)

Discussion in 'Web Design and Development' started by aceboat310, Mar 8, 2011.

  1. aceboat310 macrumors newbie

    Joined:
    Jun 6, 2006
    #1
    Sorry if this is completely obvious, but I've been trying to figure out what the technique employed on the Apple home page is where different elements dissolve in in a sequence. Once I know what it's called it will be a lot easier to go about figuring out/learning how to accomplish something similar, I just don't even know what to search for right now and would appreciate some help here. :eek:
     
  2. neko girl macrumors 6502a

    neko girl

    Joined:
    Jan 20, 2011
  3. kalsta macrumors 68000

    kalsta

    Joined:
    May 17, 2010
    Location:
    Australia
    #3
    It no doubt uses Javascript and the ability of modern browsers to alter the opacity of DOM objects. Learning to do this from scratch is an uphill battle. That's why web developers use Javascript libraries to achieve common tasks like this. I can thoroughly recommend jQuery. Google 'jQuery fadein' and you'll be on your way…
     
  4. kalsta macrumors 68000

    kalsta

    Joined:
    May 17, 2010
    Location:
    Australia
    #4
    Oh hi Neko Girl. Fancy bumping into you here! :)
     
  5. kalsta macrumors 68000

    kalsta

    Joined:
    May 17, 2010
    Location:
    Australia
    #5
    Out of curiosity I had a quick look at the code. They're not using jQuery. They do link to the scriptaculous library, but I don't think that's what they're using.

    This code looks like it handles the fade-ins, complete with delays, and the means of having either a black or white version of the iPad:

    Code:
    		// Choose blackout images based on promomanager selection
    		blackout.addImage('http://images.apple.com/au/home/images/ipad2_title_20110302.png', { offsets: [345, 133], dimensions: [289, 95], delay: .5 });
    		blackout.addImage('http://images.apple.com/au/home/images/ipad2_subhead_20110302.png', { offsets: [253, 256], dimensions: [473, 59], delay: 1 });
    
    		if(pmch.selectedPromoIndex === 0){
    			// White hardware
    			blackout.addImage('http://images.apple.com/au/home/images/ipad2_hero_20110302.png', { offsets: [-318, 115], dimensions: [1314, 480] });
    		} else {
    			// Black hardware
    			blackout.addImage('http://images.apple.com/au/home/images/ipad2_hero2_20110302.png', { offsets: [-318, 115], dimensions: [1314, 480] });
    		}
    
    I'm guessing the code which makes this work is here:
    http://images.apple.com/global/scripts/ac_blackout.js

    But if I were you, I'd just do it with jQuery.
     
  6. chown33 macrumors 604

    Joined:
    Aug 9, 2009
    #6
    It's probably a CSS transition. See the "Transitions" section of this reference doc: http://developer.apple.com/library/...fectsProgGuide/Introduction/Introduction.html

    Also see:
    http://www.w3.org/TR/2009/WD-css3-transitions-20091201/
    http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201/
    http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/
    http://www.w3.org/TR/2009/WD-css3-animations-20090320/
     

Share This Page