Jquery Gradient动画,进度条

时间:2013-02-04 11:04:57

标签: jquery css3 scroll linear-gradients

我有一个高度:15px和宽度:300px,这将是渐变进度条动画的地方。

我们可以说这是文件:

<html>
  <body>
    <a href="#container3">Container 3</a>
    <div id="container1" style="width:100%;height:1000"></div>
    <div id="container2" style="width:100%;height:650"></div>
    <div id="container3" style="width:100%;height:480"></div>
    <div id="container4" style="width:100%;height:600"></div>
  </body>
</html>

让我们说那里有一个固定位置的进度条。因此,当您单击容器3时,它将向下滚动到元素#container3,并且随着文档向下滚动,渐变进度条宽度将增加,这意味着渐变进度条相对于您滚动的高度并将达到完整元素#container3的宽度将到达屏幕顶部。滚动也可以手动完成,而不仅仅是单击容器3

- 如何为渐变(从左到右)背景颜色设置动画 - 什么是jquery算法来获得相对于滚动高度的渐变宽度增加/减少。

非常感谢实况示例