滚动时只播放CSS动画

我在页面上有内容，并且有一半的内容我拥有使用CSS动画的技能栏。我只想在看到技能栏时播放动画。滚动时只播放CSS动画

我尝试过使用js，当我使用一个技能栏时它工作。这里显示：jsfiddle.net/pCgYe/6/

但是，当我添加更多酒吧，它完全停止工作。像这里：jsfiddle.net/pCgYe/7/

我知道我必须添加一些js代码，但我不确定要添加什么。

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

如果有人可以请指导我在正确的方向。

谢谢各位提前！

来源

2013-08-27 Surge

这是因为在你的5栏版本中，你已经直接添加了CSS类，而不是通过javascript编程。意味着动画立即发生。

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

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）;

在删除HTML中添加的类之后，您还需要更改HTML展开类，如下所示：（注意：这是一个糟糕的实现，但请使用它作为基础以大大改善）。

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

重要：理想情况下，你想使你的代码的可重用性和可扩展性。我的“修补程序”是一个非常黑客的做法，并没有采用最佳做法。如果你永远不会再使用它，只需要尽快完成它就可以了，但我建议你考虑以更加干燥的方式重建它。

来源

2013-08-27 10:04:42 BenM

我试过这样做，但他们都像最后一个酒吧一样扩大到100％？（我对js有点新鲜，对我如此裸露）：/ – Surge

嗨浪涌。请参阅我编辑的原始文章。这不是完美的，它会扩展所有的，但只有当你向下滚动他们。确保首先从HTML中删除特殊类。 – BenM

我从HTML中删除了类，并添加了更新后的js代码，但它仍然在做同样的事情。所有酒吧正在扩大到100％。 – Surge

代码的问题是在html中，所有的技能已经有一个动画，所以新的动画将不会运行。我试图通过从css3类删除

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

然后css3技能有一个动画。所以，你可以做的是添加一个名为动画类的元素，然后在你的CSS去除技能类动画并添加每个技能类以下内容：

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

这应该工作

来源

2013-08-27 10:04:35 furrie

滚动时只播放CSS动画

回答

相关问题