Only play CSS animation when scroll over

Question

I have content on a page and half way through I have skill bars that are animated with CSS. I would like to play the animation only when the skill bars are in view.

I tried using js and it worked when I used one skill bar. shown here: jsfiddle.net/pCgYe/6/

But when I added more bars, it stopped working completely. Like here: jsfiddle.net/pCgYe/7/

I know I have to add something to the js code, but I am not sure exactly what to add.

function isElementInViewport(){
            var scrollTop = $(window).scrollTop();
            var viewportHeight = $(window).height();
            $('.skiller #skill:not(.html5)').each(function(){
                var top = $(this).offset().top;
                console.log(top);
                console.log(scrollTop + viewportHeight);
                if(scrollTop + viewportHeight >= top ){
                    $(this).find('.expand').addClass('html5');
                    console.log(true);
                }else{
                    console.log(false);
                }
            });
        }

$(window).scroll(isElementInViewport);

If anyone can please guide me in the right direction.

Thank you guys in advance!

Answer 1

It's because in your 5 bar version you have already added the css classes straight away and not programmtically through the javascript. Meaning the animation happens instantly.

<div class="skiller col">
    <ul id="skill">
        <li><span class="expand html5"><small>%70</small></span><em>HTML
        5</em></li>

        <li><span class="expand css3"><small>%90</small></span><em>CSS
        3</em></li>

        <li><span class=
        "expand jquery"><small>%50</small></span><em>jQuery</em></li>

        <li><span class=
        "expand photoshop"><small>%10</small></span><em>Photoshop</em></li>

        <li><span class=
        "expand dreamweaver"><small>%100</small></span><em>Dreamweaver</em></li>
    </ul>
</div>

Remove the classes after expand on each line and add them in your javascript like you do in the one bar version. I'm at work so can't do a proper version of this but try the following javascript:

function isElementInViewport(){
        var scrollTop = $(window).scrollTop();
        var viewportHeight = $(window).height();
        $('.skiller #skill:not(.html5)').each(function(){
            var top = $(this).offset().top;
            console.log(top);
            console.log(scrollTop + viewportHeight);
            if(scrollTop + viewportHeight >= top ){
                $(this).find('.expand').addClass('html5');
                $(this).find('.expand1').addClass('css3');
                $(this).find('.expand2').addClass('jquery');
                $(this).find('.expand3').addClass('photoshop');
                $(this).find('.expand4').addClass('dreamweaver');
                console.log(true);
            }else{
                console.log(false);
            }
        });
    }

$(window).scroll(isElementInViewport);

After removing the classes you've added in the HTML you will also need to change the HTML expand classes, Like so: (NOTE: This is a bad implementation but please use it as a basis to greatly improve on).

<div class="skiller col">
    <ul id="skill">
        <li><span class="expand"><small>%70</small></span><em>HTML
        5</em></li>

        <li><span class="expand expand1"><small>%90</small></span><em>CSS
        3</em></li>

        <li><span class=
        "expand expand2"><small>%50</small></span><em>jQuery</em></li>

        <li><span class=
        "expand expand3"><small>%10</small></span><em>Photoshop</em></li>

        <li><span class=
        "expand expand4"><small>%100</small></span><em>Dreamweaver</em></li>
    </ul>
</div>

Check out this fiddle for it working in action: http://jsfiddle.net/pCgYe/9/

IMPORTANT: Ideally you want to make your code reusable and extensible. My "fix" is a very hackish way of doing it and does not employ best practices. This is ok if you're never going to use this again and just need to get it done ASAP, but I would recommend you look into rebuilding this in a far more DRY fashion.

Answer 2

The problem with the code is in the html, all the skill already have an animation, so the new animation won't run. I tried this by removing

-moz-animation: css3 2s ease-out;   -webkit-animation: css3 2s ease-out; 

from the css3 class and then the css3 skill had an animation. So what you can do is add a class named animate to the element and then in your css removing the animation from the skill classes and add the following for each skill class:

.jquery.animate      {-moz-animation: jquery 2s ease-out;   -webkit-animation: jquery 2s ease-out;      }

That should work