What is this effect

On this page, on the right side, where it says 3%, you'll notice that every 20 or so seconds, a plane flies in this section. Is this done with javascript, or is it part of a开发者_如何学Gon animated image, and how is it done? I couldn't find the sample code.

P.S. Please retag if it's not javascript

---

How to figure out what's on a page:

1. Install Chrome or Firefox w/ Firebug (or Safari, but I'm not a Safari user so I can't provide instructions)
2. Load the page
3. Use the "Elements" developer tab in Chrome, or the "HTML" tab in Firebug, to select the element in question.
4. Examine the DOM where the browser tells you the element is.

In this case, you'd see a <div> tag (tellingly given the "id" value "flashcontent_home"), and inside that <div> is an <embed> tag. Sure sign of Flash.

IE 8 and 9 have developer tools that can do this too, though they're a little cumbersome. The point is that even a simple old-fashioned "View source" is the place to start.

---

Can easily be done with CSS/JS as well.

Just make an element with a background-image, assign overflow hidden. Add another element (the airplane) inside that element, animate its motion, lower the opacity, and voila:

http://jsfiddle.net/niklasvh/DXQ5a/

---

That would be flash

_{I think}

I inspected the dom using firebug and found an embed element absolutely positioned over a jpg. I would hazard a guess that they've just embedded a simple looping flash animation over the image, so that the image can change while the animation stays the same (or versa-visa).

I didn't check it out for very long, so it could still be javascript, assuming i missed the element during transition.

---

Sameold, this is a flash animation positioned over the image. Here is the code snippet:

<embed width="618" height="315" wmode="transparent" menu="false" scale="scale" quality="high" bgcolor="#ffffff" name="header_home" id="header_home" style="" src="/img/swf/header_home.swf" type="application/x-shockwave-flash">

And here is a direct link to the animation: http://armavia.am/img/swf/header_home.swf

Though, I would imagine you could do the same thing using JavaScript/CSS (probably wouldn't even need the canvas element).

---

It is a transparent flash image overlayed onto the background image. you can see the flash here: http://armavia.am/img/swf/header_home.swf you can save the .swf file and use it in your own site just as they did (although it would be copyright infringement.)