在滚动上动画进度条 [英] Animate progress bar on scroll

问题描述

我有一个进度栏，当页面加载时动画，但我想让它的动画时，用户滚动到它，因为它将在页面的中间。现在如果页面加载，用户看不到动画。

因此，实质上，动画应该暂停，直到用户滚动到某一点，一旦

这是我到目前为止的Javascript：

  $（function（）{
 $（。meter> span）。each（function（）{
 $（this）
 .data（origWidth ，$（this）.width（））
 .width（0）
 .animate（{
 width：$（this）.data（origWidth）
} ，1200）; 
}）; 
}）; 
  

更详细的jsfiddle： http://jsfiddle.net/YAZJb/

我更新了您的 jsFiddle http://jsfiddle.net/YAZJb/1/

基本上我所做的就是添加a width：100％; 和位置：fixed;

这当然是，如果我正确理解你的问题？

$ b

更新：

b

你可以使用像inview插件。以下是下载和 demo is here 。将其包装在您自己的进度条脚本中，它将不会开始动画，直到查看。

I have a progress bar that animates when the page loads, but I want it to animate when the user scrolls down to it, as it will be in the middle of the page. Right now if the page loads, the user does not see the animation.

So essentially, the animation should be paused until the user scrolls down to a certain point, once the bar is in view, the animation starts.

Here's the Javascript I have so far:

$(function() {
$(".meter > span").each(function() {
    $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
             width: $(this).data("origWidth")
             }, 1200);
    });
});​

Here is a more detailed jsfiddle: http://jsfiddle.net/YAZJb/

解决方案

how about this?

I updated your jsFiddle http://jsfiddle.net/YAZJb/1/

Essentially all I did was add a width:100%; and position:fixed; to your div with the class meter

That's, of course, If I understood your question correctly? You want the progress bar to stay in view even if the user scrolls?

update:

you could use something like the inview plugin. Here is the download and the demo is here. Wrap it around your own script for your progress bar and it won't start to animate until in view.

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