Adding Animation to Header

M

MarkStrobel3367

Member
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.
 
notarypublic

notarypublic

New Member
It's not a bad site, overall.

The interesting thing about web design is that there are a lot of ways to make something like this happen. It seems to be a much harder task to teach people to resist the urge to put flashing lights and red on black text or things like that.

I can put an animated cloud script together, provided you know what you're doing it doesn't take much time at all.
 
M

MarkStrobel3367

Member
Hi Josh,

Thanks for your response. 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;
z-index: 0;

Do I have this correct or are you thinking of a different way to add the animation? Would your cloud script include the business logo? How much would you charge me for this script? Thanks.

Mark
 
krymson

krymson

Member
Thats one way of doing it, you can also use some java scripting but if you have the programs to make good animated gifs then go for it, it will be a little bit easier for you just as long as you stay away from flash
 
M

MarkStrobel3367

Member
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.
 
leroy30

leroy30

New Member
Place your logo in front of, or beside the animated banner.

I think your clouds idea is better. You could achieve a nice subtle movement with the clouds that makes people think 'wow, that's quite cool' whereas the text would be more in your face and less of a surprise.

just my 2cents
 
M

MarkStrobel3367

Member
notarypublic said:
It's not a bad site, overall.

The interesting thing about web design is that there are a lot of ways to make something like this happen. It seems to be a much harder task to teach people to resist the urge to put flashing lights and red on black text or things like that.

I can put an animated cloud script together, provided you know what you're doing it doesn't take much time at all.
Click to expand...

Hi Josh,

If you designed a script for me, which file would I place it on? I would like to take you up on your offer provided that I know exactly where the script goes. Thanks.

Mark
 
wwag

wwag

New Member
Hey I think you need to lose the cheesy flash intro...

I also think that you should re-do the header completely...move the phone, email (contact info) over to the right, put a simple animation (use JavaScript or HTML 5 not flash!), and it will look a little better...
 
You must log in or register to reply here.
Top