Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS3 Cloud Animations

    Hey Guys,

    looking for a bit of help, im trying to learn css3 animations, just basics but everything i try doesnt seem to work as it says it does.

    basically i made a really long page

    *{ margin: 0; padding: 0;}

    body {
    overflow: visible;
    height:3840px;
    }

    I then added a image called cloud.

    but how using only CSS3 do you animate the cloud to move across the screen infinitely?

    Thanks for the help.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Nicholas23,

    You will probably have to wait for IE10 for "CSS3 animation" support.

    Source:-


    You can download a simple example of continuous animation here...

    ...although Opera, unfortunately at present, does not seem to render "infinite".

    coothead

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hey thanks,

    yeah im aware its got limited support, im just doing this for my own learning on firefox so im alright. this is what i worked out so far.

    HTML:

    <body>
    <div class="cloud1"><img src="img/cloud.png" width="300" height="150" alt="cloud"></div>
    <div class="cloud2"><img src="img/cloud.png" width="300" height="150" alt="cloud"></div>
    <div class="cloud3"><img src="img/cloud.png" width="300" height="150" alt="cloud"></div>
    <div class="cloud4"><img src="img/cloud.png" width="300" height="150" alt="cloud"></div>

    <div class="fish1"><img src="img/fish1.png" width="200" height="120" alt="fish"></div>
    <div class="fish2"><img src="img/fish2.png" width="200" height="120" alt="fish"></div>
    <div class="fish3"><img src="img/fish3.png" width="200" height="120" alt="fish"></div>
    <div class="fish4"><img src="img/fish4.png" width="200" height="120" alt="fish"></div>

    <h1 align="center" style="margin-top:200px;">WELCOME TO SPACE...coming soon, scroll down.</h1>
    <h1 align="center" style="margin-top:1350px;">THERES GONNA BE CLOUDS HERE</h1>
    <h1 align="center" style="margin-top:2800px;">WATERS PRETTY DEEP HERE</h1>
    </body>

    CSS:

    .cloud1{
    position:absolute;
    top:1750px;
    left:-500px;
    animation:20s linear infinite cloud;
    }
    [theres more cloud classes but not adding for simplicity of reading]

    .fish1{
    position:absolute;
    top:4000px;
    right:-500px;
    animation:19s linear infinite fishleft;
    }
    .fish2{
    position:absolute;
    top:3700px;
    left:-500px;
    animation:15s linear infinite fishright;
    }

    KEYFRAMES:

    @keyframes fishleft{
    from{right:100%}
    to{right:-20%}
    }
    @-moz-keyframes fishleft{
    from{right:100%}
    to{right:-20%}
    }
    @keyframes fishright{
    from{left:100%}
    to{left:-20%}
    }
    @-moz-keyframes fishright{
    from{left:100%}
    to{left:-20%}
    }


    @keyframes cloud{
    from{left:100%}
    to{left:0%}
    }
    @-moz-keyframes cloud{
    from{left:100%}
    to{0%}
    }

    RESULT:

    http://silverreign.co.za

    so i have a further question. since im happy enough with the basics, ill do something more with it over time.

    but having a scrollbar is ugly, so ideally i would want to set the overflow to hidden.

    however i would need a button that then would scroll down the page, how do i go about creating that?

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •