只玩CSS动画的时候了滚动 [英] Only play CSS animation when scroll over

问题描述

我有一个页面上的内容，并通过我有一个是动画与CSS技巧吧一半。我想只播放动画时的技巧酒吧在视图中。

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.

我试着用js的，当我使用的一个技能栏，它的工作。如下图所示： jsfiddle.net/pCgYe/6/

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

但是，当我增加了更多的酒吧，这完全停止工作。喜欢这里： jsfiddle.net/pCgYe/7/

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

我知道我必须要添加一些JS的code，但我不知道到底是什么要补充。

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.

感谢你们提前！

推荐答案

这是因为在你的5条版本，你已经添加CSS类直线距离，而不是通过programmtically的JavaScript。这意味着动画瞬间发生。

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>

删除的类后扩大在每一行，并将它们添加在你的JavaScript就像你在一个酒吧做版。
我在工作中很不能做这个正确的版本，但尝试以下的javascript：

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);
            }
        });
    }

$（窗口）.scroll（isElementInViewport）;

$(window).scroll(isElementInViewport);

删除您在HTML已经添加了类之后，你还需要改变HTML扩展类，像这样：（注意：这是一个糟糕的实现，但请把它作为一个基础，大大提高）<。 / p>

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>

看看这个捣鼓它在行动工作： http://jsfiddle.net/pCgYe/9/

重要提示：理想情况下你想使你的code可重复使用和可扩展。我的修复是做的非常hackish的方式，不采用最佳实践。这是确定的，如果你永远也不会再使用这一点，只需要得到它尽快完成，但我会建议你考虑在一个更为干干巴巴重建这一点。

这篇关于只玩CSS动画的时候了滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！