Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 297
  • Last Modified:

apple homepage transition

Hiya

I want to do the same effect that the apple homepage has when you got to it.

I have a div called mainThing that i want visable like the IPAD is on the current apple.com homepage.

http://www.apple.com/

Ww
0
willa666
Asked:
willa666
  • 2
  • 2
2 Solutions
 
Michel PlungjanIT ExpertCommented:
Seems the code is here

http://images.apple.com/global/scripts/ac_blackout.js


<div id="ACBlackout" class="ACBlackout" style="height: 963px; display: none;"><a class="ACBlackoutMain linked" href="/ipad/" onclick="s_objectID=&quot;http://www.apple.com/ipad/_1&quot;;return this.s_oc?this.s_oc(e):true"><img src="http://images.apple.com/home/images/ipad2_title_20110302.png" class="ACBlackoutImg" style="top: 133px; left: 345px; width: 289px; height: 95px;"></a><a class="ACBlackoutMain linked" href="/ipad/" onclick="s_objectID=&quot;http://www.apple.com/ipad/_2&quot;;return this.s_oc?this.s_oc(e):true"><img src="http://images.apple.com/home/images/ipad2_subhead_20110302.png" class="ACBlackoutImg" style="top: 256px; left: 253px; width: 473px; height: 59px;"></a><a class="ACBlackoutMain linked" href="/ipad/" onclick="s_objectID=&quot;http://www.apple.com/ipad/_3&quot;;return this.s_oc?this.s_oc(e):true"><img src="http://images.apple.com/home/images/ipad2_hero_20110302.png" class="ACBlackoutImg" style="top: 115px; left: -318px; width: 1314px; height: 480px;"></a></div>

Open in new window

0
 
leakim971PluritechnicianCommented:
with jquery (2000 for 2 seconds) :
$(document).ready(function() {
     $("#mainThing").fadeIn(2000, function() {
         setTimeout("$('.mybody').fadeIn(2000)", 2000);   
     });
});

Open in new window





<div class="mybody" style="display:none">head elements like menus & co</div>
<div id="mainThing" style="display:none">IPAD</div>
<div class="mybody" style="display:none">element at the bottom / second part of the page</div>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Why the 3 x 2000?
0
 
leakim971PluritechnicianCommented:
:)

Take 2s to appear with fade effect
After 2s alone
Take 2s to display the other elements of the page with fade effect

But we can do something different...
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now