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
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS3 Animations When Scrolled Over

    Hello all! Brand new here, but I'm trying to learn more code so expect to see me around.

    I'm not a coder by any stretch of the imagination, but I understand it enough to piece together random bits and make it work. However, I've been stuck on this for days now and can't figure it out at all.

    I have a set of "progress bars" that animate through CSS3, but they animate in when the page loads. I want to make it so the animation occurs once you scroll over the div section they are in. I know this requires JS but it is so foreign to me. I tried Scrollorama and Waypoints and couldn't figure out either.

    To give you an idea of my code, the CSS looks like this for each bar:
    .bar1 { width: 8%; -moz-animation: bar1 2s ease-out; -webkit-animation: bar1 2s ease-out; }
    @-moz-keyframes bar1 { 0% { width: 0px;} 100%{ width: 8%;} }
    @-webkit-keyframes bar1 { 0% { width: 0px;} 100%{ width: 10%;} }

    I think the rest of the code is self-explanatory, just simple styling.

    I feel like this should be a simple solution but I am so totally lost. I need to be walked through this one like a child, haha.

    Thanks to whoever feels kind enough to help me out!

  • #2
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    You need to give more code then only the scroll bars, because it is easier to see what can be done.
    What do you mean by scroll over?

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dznr View Post
    You need to give more code then only the scroll bars, because it is easier to see what can be done.
    What do you mean by scroll over?
    I'm happy to provide more code, it's just a long webpage and I didn't think I should complicate it. This is the HTML that contains the bars:

    <div class="skill-bars">

    <div class="col">
    <ul id="skill">
    <li><span class="expand mask bar1 tip"></span><em>$1000</a> </em></li>
    <li><span class="expand mask bar2 tip"></span><em>$2000</a> </em></li>
    <li><span class="expand mask bar3 tip"></span><em>$3000</a> </em></li>

    </ul>

    </div>
    </div>


    And here is how they look animated:
    http://goldenwp.guuhuu.com/about/

    Basically, I don't want the animation to occur until you scroll down the page and they are visible to the user. As it stands now, the bars animate on page load.

    Does that make a bit more sense?


  •  

    Tags for this Thread

    Posting Permissions

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