[Project] Animating background !

[CReative59]

Hey there guys … how is everyone doing ??
I’m new in here, but I have an idea that i’m working one right now and I wanna share it with you…

I’m designing a new Joomla theme and i got the layout done in PS – Simple and elegant focusing on the content – but i wanna add some sophistication to the web-page.
I was thinking to add a scene an animating scene in the background a night scene and a morning one … maybe after this use java script to change between them according to time on the browser machine …..

I’m working now on the night scene … i have 4 elements . stars , moon , clouds and background gradient ….

I’ll be using the Keyframes option on CSS3 to animate the scene … I’ve already done the glaring of the stars and used 6 images as starting stars and used CSS3 Gradients for the background …..

for the moon the animation will be orbiting around its core … Easy

@-webkit-keyframes orbit {

from  {-webkit-transform:rotate(0deg);}

to {-webkit-transform:rotate(360deg);}

}

for the stars i made 5 different animation including rotating and scaling … easy too

@-webkit-keyframes staring5 {

0% {-webkit-transform:rotate(120deg) scale(.6) ;}

20%  {-webkit-transform:rotate(50deg) scale(.7) ;}

40%  {-webkit-transform:rotate(100deg) scale(.9) ;}

80%  {-webkit-transform:rotate(-180deg) scale(1.2) ;}

100%  {-webkit-transform:rotate(120deg) scale(.6) ;}

}

lastly i’m still thinking about the positioning of the stars … they should be all placed randomly around the web-page ….. :)
I guess i’ll make multiple random positions and apply them randomly to the stars as well ….

You can check my progress here http://mr-creative59.com/test/

Any suggestions and discussion is welcomed

[jamygolden]

@CReative59 nice, it’s looking pretty good. Keep it up.

[Nahuel]

Looks great! :) One little detail though, I think the moon shouldn’t cover the clouds, but it should be the other way around. After all, clouds are closer :P

[clokey2k]

Once you are happy with the complete animation you might want to slow it down a bit. Could make it a little more subtle, and maybe a little less distracting from the foreground content.

Keep the speed up while in development, otherwise you could spend hours testing!!

[CReative59]

@Jamy_za thanks for the comment dude, Glad you liked it ..

@Nahuel …. thanks for the tip … will do it in tomorrow’s session isA ..

@Clokey2k … I’m dealing with 5s animations during my coding process … and I make it around 60-80 in the final product but i still guess like you that i might slow it down even more …

BTW guys anyclues how to convert my HTML (still incomplete) into a Joomla! template …. I’m actually planning on following the documentations on Joomla.org …. does anyone has a better source ??

[CReative59]

@paulie_D That’s an awesome suggestion … will do it now …
as for the clouds thingie .. the clouds should be the nearest and then the moon and last behind the comes the moon .. will do now too

[Author]

Posts