Adding Animation to Header

I own a website, http://www.strongfamilies.us. My knowledge of website design is very limited. I have been trying to do as many edits to my site on my own to save some money. What I would like to do is to add subtle animation to the header of my site, perhaps having the clouds move or something of that nature. In layman's terms, does anyone know how I could make this happen? Or, is this something that I would need to hire a web designer for? Thanks.

 

You need knowledge of flash or gif animation. If you do then the html bit is easy..

Read some flash tutorials

 

You can also try to use some javascript techinques.

here is an example using jquery - js library: http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

 

i think those are advance javascript, maybe you should start with something easier to handle like a gif or flash, loads of tutorials but with javascript you need advance html, css and learn javascript and use the javascript jqueries

 

Do you know of any good online GIF animators such as http://www.blibs.com/editor that offers a variety of animations to images? Thanks.

 

I just thought of something - The header of some websites I visited have their business logo to the left and animated text to the right of the logo. There are numerous sites that offer free animated text banners. I don't need to have animated clouds. Animated text would be perfect for my needs. I just don't know how to include my logo with the animated text as the free online banner creators do not allow me to upload my own image. Does anyone know of a way that I could make a animated file by placing my logo and an animated text banner to the right of the logo for a header?

I think that all I would need to do is substitute the background image located on the layout.css file in the Includes folder under Header with an animated image:

#header {
height: 230px;
position: relative;
top: 0px;
left: 0px;
width: inherit;
background-image: url('../images/layout/header-background.png');
background-repeat: no-repeat;
background-color: #ffffff;

Thanks.