Moving Background Graphic - AMAZING - How is it done?

Guys Check these web sites out.

They are using moving graphics in the background. How in the heck are they doing this???? How in the heck are they able to place moving images in the background? This in my book is a 10 on the cool scale. :thumbsup:

Moving Clouds and Boats in Background (http://www.yootheme.com/demo/themes/joomla/2009/motion/index.php?preset=turquoise)

Moving Sharks and Fish (http://www.yootheme.com/demo/themes/joomla/2009/motion/index.php?preset=default)

Moving Clouds Plane and Blimp (http://www.yootheme.com/demo/themes/joomla/2009/motion/index.php?preset=blue)


These pages are Joomla templates so I'm having a difficult time reverse engineering the pages to understand how this effect works.

Is there a tutorial out there that explains how this is done? I've got to know how this cool effect works.

Thanks in advance for the help

There are a number of different images placed on top of each other. The boats are individual images, and their left or right positions are being animated via a mooTools script.

Google finds: http://davidwalsh.name/dw-content/background-animation.php and a load of others.

Well without really looking into the code....Adobe Flash can create motion graphics fairly easily. There are lots of free flash movies on the internet for download as well. I remember downloading a flash object that had a farm scene with very realistic moving clouds.

Adobe Flash can create motion graphics fairly easily.

However, using Flash in this context is pretty counterproductive and if I may say it harshly: just stupid. After all, this is purely decorative. Why would a purely decorative element have to be coded into the HTML and why would I have to download a Flash object for a purely decorative purpose when I’m just looking for information?

These are questions you have to ask yourself before even thinking about using Flash. People usually visit a website for the information they get, not primarily to see a funny, distracting animation. If such thing is desired then it should definitely done using progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement) with a few images and JavaScript. That’s at least better than Flash.

However, using Flash in this context is pretty counterproductive and if I may say it harshly: just stupid. After all, this is purely decorative. Why would a purely decorative element have to be coded into the HTML and why would I have to download a Flash object for a purely decorative purpose when I’m just looking for information?

These are questions you have to ask yourself before even thinking about using Flash. People usually visit a website for the information they get, not primarily to see a funny, distracting animation. If such thing is desired then it should definitely done using progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement) with a few images and JavaScript. That’s at least better than Flash.

True...lol I was just pointing out to the OP that flash can do this. He seemed to be amazed at how it was done.
I also think the flash object I dl was used for an intro page. I dont like using alot of flash myself.

SB65 Thank You Very Much For That Link!

Its what I needed.

PERFECT!

http://davidwalsh.name/dw-content/background-animation.php