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:
- Install Chrome or Firefox w/ Firebug (or Safari, but I'm not a Safari user so I can't provide instructions)
- Load the page
- Use the "Elements" developer tab in Chrome, or the "HTML" tab in Firebug, to select the element in question.
- 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.)
精彩评论