Adding Animation to Header

Get Started
1

I own a website, Building Strong Families National Seminars - Online parenting classes, Bullying conference. 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.

2

Usually, you’d need something like Flash for that, so I’d say you’d need to get someone familiar with that to do it. Mind you, Flash introduces its own issues, like whether or not its supported on the user’s machine. Personally, I don’t think it’s worth it, especially for decoration like that. You could use an animated .gif instead. This is just an image file ending in .gif, a format that allows for animation. In Photoshop, you would just set up a number of variations of the image and set a timing for the movement, though I’m not sure how well it would work with clouds.

My advice would be to forget the idea. It’s better in my view not to get too fancy ike this, especially when it involves background decoration.

3

yep, having the clouds “move” is a waste of your time and/or money having little benefit financially and anyone to tell you otherwise is selling you snake oil.

4

Do you know of any good online GIF animators such as MyTheme Online Photo Editor that offers a variety of animations to images? Thanks.

5

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.

6