内容滚动到视图时激活CSS3animation

我有一个条形图,animationCSS3和animation当前激活页面加载。

我的问题是给定的条形图由于之前有很多内容而被放置在屏幕之外,所以当用户向下滚动时,animation已经完成。

我正在寻找通过CSS3或jQuery的方式,只有当查看器查看图表时才激活条形图上的CSS3animation。

<div>lots of content here, it fills the height of the screen and then some</div> <div>animating bar chat here</div> 

如果您在页面加载后向下滚动,您可以看到它的animation。

这是我的代码jsfiddle 。 此外,我不知道这是否重要,但我有这个条形图在页面上的几个实例。

我遇到了一个名为waypoint的jQuery插件,但我绝对没有运气让它工作。

如果有人能把我指向正确的方向,这将是非常有益的。

谢谢!

捕获滚动​​事件

这需要使用JavaScript或jQuery来捕获滚动事件,每次检查滚动事件时检查元素是否在视图中。

一旦元素在视图中,开始animation。 在下面的代码中,这是通过向元素添加一个“start”类来完成的,这会触发animation。

更新的演示

HTML

 <div class="bar"> <div class="level eighty">80%</div> </div> 

CSS

 .eighty.start { width: 0px; background: #aae0aa; -webkit-animation: eighty 2s ease-out forwards; -moz-animation: eighty 2s ease-out forwards; -ms-animation: eighty 2s ease-out forwards; -o-animation: eighty 2s ease-out forwards; animation: eighty 2s ease-out forwards; } 

jQuery的

 function isElementInViewport(elem) { var $elem = $(elem); // Get the scroll position of the page. var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); var viewportTop = $(scrollElem).scrollTop(); var viewportBottom = viewportTop + $(window).height(); // Get the position of the element on the page. var elemTop = Math.round( $elem.offset().top ); var elemBottom = elemTop + $elem.height(); return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); } // Check if it's time to start the animation. function checkAnimation() { var $elem = $('.bar .level'); // If the animation has already been started if ($elem.hasClass('start')) return; if (isElementInViewport($elem)) { // Start the animation $elem.addClass('start'); } } // Capture scroll events $(window).scroll(function(){ checkAnimation(); }); 

有时,当元素位于视口中时,您总是需要animation。 如果这是你的情况,我稍微修改马特jsfiddle代码来反映这一点。

jQuery的

 // Check if it's time to start the animation. function checkAnimation() { var $elem = $('.bar .level'); if (isElementInViewport($elem)) { // Start the animation $elem.addClass('start'); } else { $elem.removeClass('start'); } } 

为了激活一个CSSanimation,当这个元素变得可见时,需要将一个类添加到元素中。 正如其他答案已经表明,JS是必需的, Waypoints是一个JS脚本,可以使用。

航点是滚动到某个元素时最简单的方法。

截至Waypoint版本2,这曾经是一个相对简单的jQuery插件。 在版本3及以上版本(本指南版本3.1.1)中已经介绍了几个特性。 为了达到上述目的,可以使用脚本的“查看快捷键” :

  1. 从这个链接或从Github下载并添加脚本文件(版本3 尚未通过CDNJS提供 ,尽pipeRawGit也是一个选项)。

  2. 像往常一样将脚本添加到您的HTML。

     <script src="/path/to/lib/jquery.waypoints.min.js"></script> <script src="/path/to/shortcuts/inview.min.js"></script> 
  3. 添加以下JS代码,用相应的HTML元素jQueryselect器replace#myelement

     $(window).load(function () { var in_view = new Waypoint.Inview({ element: $('#myelement')[0], enter: function() { $('#myelement').addClass('start'); }, exit: function() { // optionally $('#myelement').removeClass('start'); } }); }); 

我们使用$(window).load()来解释这里的原因。

这里更新了Matt的小提琴。

除了这些答案,请考虑以下几点:

1-检查视图中的元素有很多注意事项:
如何判断一个DOM元素在当前视口中是否可见?

2-如果有人想要更多的控制animation(例如设置“ animationtypes ”和“ 启动延迟 ”),这里有一个很好的文章:
http://blog.webbb.be/trigger-css-animation-scroll/

3,而且似乎没有延迟调用addClass (使用setTimeout )是无效的。