"Heads Up Display" Animated Javascript Popup


	Cow Forums : Adobe Dreamweaver << PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>

"Heads Up Display" Animated Javascript Popup
by Christopher Knell (FireLine Studios) on Nov 19, 2008 at 6:18:13 pm

Hi all
I'm trying to find somewhere I can read a little more about creating an animated popup window like the ones found on the Apple Trailers site.

The links produce a cool effect that dims the entire page and animates a popup window containing the selected video.

Trying to reverse engineer the Apple web pages is proving to be quite a task

Here's an example of what I'm looking to re-create:

http://www.apple.com/trailers/sony/ohorten/

Select the STANDARD SMALL for a quick preview of what I'm looking to accomplish.

I suspect it's a

of some sort being controlled by javascript.

Anyone seen a tutorial or forum post with the solution anywhere?

Thank you , thank you.

Christopher Knell
FireLine Studios
Burbank, CA

Respond to this post • Return to posts index

Re: "Heads Up Display" Animated Javascript Popup
by Abraham Chaffin on Nov 19, 2008 at 7:01:04 pm

Hello Christopher,

Try out this tutorial:
http://library.creativecow.net/articles/chaffin_abraham/full-page-overlay.p...

Abraham

Respond to this post • Return to posts index

Re: "Heads Up Display" Animated Javascript Popup
by Christopher Knell on Nov 19, 2008 at 7:05:16 pm

I guess we were responding at the same time. I found that one too.... I'm wondering if you know how to do the animation part of the reveal? Can you suggest a discussion somewhere?

Thanks.

Christopher Knell
FireLine Studios
Burbank, CA

Respond to this post • Return to posts index

Re: "Heads Up Display" Animated Javascript Popup
by Christopher Knell on Nov 19, 2008 at 7:11:42 pm

Thanks Abraham:

I noticed something else...on your example page, the viewer has to click the "close window" link to return to the main page but on the Apple page, just clicking outside the player initiates the return. Any thoughts?
Thanks

Christopher Knell
FireLine Studios
Burbank, CA

Respond to this post • Return to posts index

Re: "Heads Up Display" Animated Javascript Popup
by Christopher Knell on Nov 19, 2008 at 7:02:53 pm

A little more looking around on the Cow and I found this:

http://library.creativecow.net/articles/chaffin_abraham/full-page-overlay.p...

This is a great start to making this happen. Now I just need to figure out how to animate the div when it loads.

Anyone?

Christopher Knell
FireLine Studios
Burbank, CA

Respond to this post • Return to posts index

Re: "Heads Up Display" Animated Javascript Popup
by Abraham Chaffin on Nov 19, 2008 at 7:05:38 pm

What do you mean by animate the div? Are you animating the div or the elements in the div?

Abraham

Respond to this post • Return to posts index

Re: "Heads Up Display" Animated Javascript Popup
by Christopher Knell on Nov 19, 2008 at 7:13:24 pm

Have a look at this example of an "Animated" reveal:

http://www.apple.com/trailers/sony/ohorten/index.html

Christopher Knell
FireLine Studios
Burbank, CA

Respond to this post • Return to posts index

Re: "Heads Up Display" Animated Javascript Popup
by Abraham Chaffin on Nov 19, 2008 at 7:30:05 pm

The javascript for the animated reveal could be done in different ways, one way to do it would be animate the scale on the initial display of the window.

The close method would simply be an onclick event that would execute the same javascript as the close window button only be applied to the surrounding container element.

Abraham

Respond to this post • Return to posts index

Re: "Heads Up Display" Animated Javascript Popup
by Christopher Knell on Nov 19, 2008 at 7:38:29 pm

Abraham: Thanks for all your input... I'm well on my way to making this all happen.

Christopher Knell
FireLine Studios
Burbank, CA

Respond to this post • Return to posts index


	<< PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>