html5 - 当内容滚动到视图中时,jquery激活CSS3动画

  显示原文与译文双语对照的内容
141 1

我有一个用CSS3动画制作的条形图,当前的动画在页面加载时激活。

我的问题是,给定的条形图是由于大量内容前面的内容,因这里动画已经完成了。

当查看器看到图表时,我要通过jdo或者jQuery在条形图上激活nautilus动画。


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


<div>animating bar chat here</div>



如果你在页面加载后快速向下滚动,你可以看到它的动画。

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

我遇到了一个叫做waypoint的jQuery插件,但我绝对没办法让它工作。

如果有人能把我指向正确的direction 那就很有用了。

谢谢!

时间: 原作者:

89 3

捕获滚动事件

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

一旦元素处于视图中,启动动画。 在代码 below 中,这是通过向元素添加一个"开始"类来触发动画的,这是。

更新演示插件

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


});



原作者:
125 4

有时,当元素位于视口中时,需要始终使用动画。 如果是这样的话,我稍微修改一下 Matt 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');


 }


}



145 3

为了激活CSS动画,当这里变量变为可以见时,需要将类添加到元素中。 如其他答案所示,是必需的,路点是一个可以使用的JS脚本。

Waypoints是在滚动到元素时触发函数的最简单方法。

Up版本 2,这以前是一个相对简单的jquery插件。 在版本 3和 上面 ( 本指南版本 3.1.1 ) 中引入了几个特性。 为了实现 上面,可以使用脚本的'inview快捷方式':

下载脚本文件并从中添加脚本文件,或者从Github

像通常一样将脚本添加到 HTML 。


<script src="/path/to/lib/jquery.waypoints.min.js"></script>


<script src="/path/to/shortcuts/inview.min.js"></script>



添加以下JS代码,用适当的HTML元素jQuery选择器替换 #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

原作者:
112 1

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

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

如果有人希望对动画有更多控制( 。 设置"动画类型"和"启动延迟"是关于它的一篇很好的文章:
http://blog.webbb.be/trigger-css-animation-scroll/

3-而且似乎在没有延迟( 使用 setTimeout )的情况下调用 addClass 是不有效的。

原作者:
142 2

CSS FOR TRIGGER : 


.trigger{


 width: 100px;


 height: 2px;


 position: fixed;


 top: 20%;


 left: 0;


 background: red;


 opacity: 0;


 z-index: -1;


}


<script>


$('body').append('<div class="trigger js-trigger"></div>');



 $(document).scroll(function () {



 $('YOUR SECTIONS NAME').each(function () {



 let $this = $(this);



 if($this.offset().top <= $('.js-trigger').offset().top) {



 if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {


 $this


. addClass('currSec')


. siblings()


. removeClass('currSec');



 }


 }



 });



 });


</script>



...