The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Project] Animating background !

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #33999

    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

    Any suggestions and discussion is welcomed


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


    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


    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!!


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

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

    … 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 …. does anyone has a better source ??


    @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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.