Solved

apple homepage transition

Posted on 2011-03-02
4
277 Views
Last Modified: 2012-05-11
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
Comment
Question by:willa666
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 35020738
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 35020855
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35020910
Why the 3 x 2000?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35021112
:)

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question