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

[aceboat310]

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.

 

[neko girl]

I would like to know this too

 

[kalsta]

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.

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…

 

[kalsta]

Oh hi Neko Girl. Fancy bumping into you here!

 

[kalsta]

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:

		// 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.

 

[chown33]

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.

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/

 

[Cabbit]

Heres a tutorial to make it.
http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/