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 Can do this with html5/CSS3.

 

I have not much experience but an willing to help you on the way.

 

First you need to have the complete header redesigned in layers.

 

1.the logo needs to be an transparent .png file, no white background (the happy family and the name of company)

 

2.you need to make a few transparent .png files with a clouds, not too many clouds per .png and spaced out enough as to see the other cloud layers behind it.

 

These cloud png files can be stacked with z-index and moved horizontally with CSS.

 

The cloud png files should be much wider that the header to allow it to move without running out of png.

 

Hope this makes sense.

 

After this you should get back and I can look at the coding with you.

 

But you will definitely get more, maybe easier replies any moment

 

Good luck

P.

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.

Why do you want an animation? To detract from the content? Just leave it as it is...and in my opinion, get rid of that animated banner at the top too. It looks like a banner ad which people try and ignore but it just continues to distract them from reading your site.

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.

The problem with animation is that it will be the first thing people look at so unless it's something important it's not worth doing. Thinking of all the websites people like to visit - google, facebook, digg etc... none of them have animation, I'm not saying don't think outside the box but animation isn't the best idea.