在进度条上在屏幕上显示时开始动画 [英] Start animation on progress bar when its visible on screen

问题描述

我想创建一个包含多个部分的网页。在其中一个部分是类似进度条。这些进度条是'动画'，以便用户看到他们在屏幕上加载，如示例所示。

现在这是正常工作，但我的问题是：

我想让进度条开始载入。

用户向下滚动并将它们放在屏幕中间，动画应该开始。现在动画在网页加载时开始，但是栏还不可见，如下面的小调：

小提琴

稍微多一点的是，

我在堆栈上发现了一些类似的问题，但答案不足以满足我的需求：
滚动滚动进度条& 在元素在屏幕上显示时运行动画

我尝试过类似的东西（它不是实际代码，但它是我记得的）：

  var target = $（＃third）。offset（）。top; 
 var interval = setInterval（function（）{
 if（$（window）.scrollTop（）> = target）{
 //开始加载进度条
} 
}，250）; 
  

但没有任何好的结果。

解决方案

/ div>

这里是一个小提琴： http://jsfiddle.net/rAQev/4/

我已经使用滚动偏移和你的特殊截面偏移的比较来检测这一部分可见的时刻。
动画排队使用jQuery queue 函数一个接一个地处理，你可以在jQuery docs（ http://api.jquery.com/queue/ ）。
还有 scroll 事件在第一次加载时未绑定，而不是在可见的滚动事件上重复运行加载。

I want to create a webpage that contains several sections. In one of those sections are something like progress bars. These progress bars are 'animated' so that the user sees them loading on the screen as shown in the example.

Example here

Now this is working as it is but my problem is this:

I want the progress bars to start loading when the bars become visible on the screen.

Once the user scrolls down and gets them in the middle of the screen, the 'animation' should start. The way it is now the animation starts on page load, but the bars are not yet visible as in the following fiddle:

Fiddle

A little extra would be that each bar starts loading after the previous is finished.

I found some similar questions on stack but the answer does not suffice to my needs: Animate progress bar on scroll & Run animation when element is visible on screen

I tried stuff like (it's not the actual code but it's what I remember of it):

var target = $("#third").offset().top;
var interval = setInterval(function() {
    if ($(window).scrollTop() >= target) {
        //start loading progress bar
    }
}, 250);

But without any good results. Can anyone help me on this matter?

Thanks in advance!

解决方案

Here is a fiddle: http://jsfiddle.net/rAQev/4/

I've used a comparison of scroll offset and your special section offset to detect a moment when this section becomes visible. Animations are queued to be processed one after another using jQuery queue function, you can read about it in jQuery docs (http://api.jquery.com/queue/). Also scroll event is unbinded when the first 'loading' happens, not to run 'loading' again and again on scroll event when section is visible.

这篇关于在进度条上在屏幕上显示时开始动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！