导航菜单
首页 > 网页制作 > html5 » 正文

HTML5超炫酷粒子效果的进度条的实现示例

后台-系统设置-扩展变量-手机广告位-内容正文顶部

这是一款基于HTML5和JavaScript的进度条应用,这款进度条插件非常有特点,它在进度展示的时候呈现粒子的动画效果,也就是说,进度条在滑动的同时,会产生一些小粒子掉落下来,效果非常酷。另外还有一个特点是随着进度的变化,进度条的颜色也会变化。

JavaScript代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
/*========================================================*/ 
/* Light Loader
/*========================================================*/
var lightLoader = function(c, cw, ch){
 
    var _this = this;
    this.c = c;
    this.ctx = c.getContext('2d');
    this.cw = cw;
    this.ch = ch;          
 
    this.loaded = 0;
    this.loaderSpeed = .6;
    this.loaderHeight = 10;
    this.loaderWidth = 310;            
    this.loader = {
        x: (this.cw/2) - (this.loaderWidth/2),
        y: (this.ch/2) - (this.loaderHeight/2)
    };
    this.particles = [];
    this.particleLift = 180;
    this.hueStart = 0
    this.hueEnd = 120;
    this.hue = 0;
    this.gravity = .15;
    this.particleRate = 4; 
 
    /*========================================================*/   
    /* Initialize
    /*========================================================*/
    this.init = function(){
        this.loop();
    };
 
    /*========================================================*/   
    /* Utility Functions
    /*========================================================*/               
    this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);};
    this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
 
    /*========================================================*/   
    /* Update Loader
    /*========================================================*/
    this.updateLoader = function(){
        if(this.loaded < 100){
            this.loaded += this.loaderSpeed;
        } else {
            this.loaded = 0;
        }
    };
 
    /*========================================================*/   
    /* Render Loader
    /*========================================================*/
    this.renderLoader = function(){
        this.ctx.fillStyle = '#000';
        this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);
 
        this.hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart);
 
        var newWidth = (this.loaded/100)*this.loaderWidth;
        this.ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)';
        this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);
 
        this.ctx.fillStyle = '#222';
        this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2);
    }; 
 
    /*========================================================*/   
    /* Particles
    /*========================================================*/
    this.Particle = function(){                
        this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0, 1);
        this.y = _this.ch/2 + _this.rand(0,_this.loaderHeight)-_this.loaderHeight/2;
        this.vx = (_this.rand(0,4)-2)/100;
        this.vy = (_this.rand(0,_this.particleLift)-_this.particleLift*2)/100;
        this.width = _this.rand(1,4)/2;
        this.height = _this.rand(1,4)/2;
        this.hue = _this.hue;
    };
 
    this.Particle.prototype.update = function(i){
        this.vx += (_this.rand(0,6)-3)/100;
        this.vy += _this.gravity;
        this.x += this.vx;
        this.y += this.vy;
 
        if(this.y > _this.ch){
            _this.particles.splice(i, 1);
        }                  
    };
 
    this.Particle.prototype.render = function(){
        _this.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+_this.rand(50,70)+'%, '+_this.rand(20,100)/100+')';
        _this.ctx.fillRect(this.x, this.y, this.width, this.height);
    };
 
    this.createParticles = function(){
        var i = this.particleRate;
        while(i--){
            this.particles.push(new this.Particle());
        };
    };
 
    this.updateParticles = function(){                 
        var i = this.particles.length;                     
        while(i--){
            var p = this.particles[i];
            p.update(i);                                           
        };                     
    };
 
    this.renderParticles = function(){
        var i = this.particles.length;                     
        while(i--){
            var p = this.particles[i];
            p.render();                                        
        };                 
    };
 
    /*========================================================*/   
    /* Clear Canvas
    /*========================================================*/
    this.clearCanvas = function(){
        this.ctx.globalCompositeOperation = 'source-over';
        this.ctx.clearRect(0,0,this.cw,this.ch);                   
        this.ctx.globalCompositeOperation = 'lighter';
    };
 
    /*========================================================*/   
    /* Animation Loop
    /*========================================================*/
    this.loop = function(){
        var loopIt = function(){
            requestAnimationFrame(loopIt, _this.c);
            _this.clearCanvas();
 
            _this.createParticles();
 
            _this.updateLoader();
            _this.updateParticles();
 
            _this.renderLoader();
            _this.renderParticles();
 
        };
        loopIt();                  
    };
 
};
 
/*========================================================*/   
/* Check Canvas Support
/*========================================================*/
var isCanvasSupported = function(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
};
 
/*========================================================*/   
/* Setup requestAnimationFrame
/*========================================================*/
var setupRAF = function(){
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    };
 
    if(!window.requestAnimationFrame){
        window.requestAnimationFrame = function(callback, element){
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    };
 
    if (!window.cancelAnimationFrame){
        window.cancelAnimationFrame = function(id){
            clearTimeout(id);
        };
    };
};         
 
/*========================================================*/   
/* Define Canvas and Initialize
/*========================================================*/
if(isCanvasSupported){
  var c = document.createElement('canvas');
  c.width = 400;
  c.height = 100;          
  var cw = c.width;
  var ch = c.height;   
  document.body.appendChild(c);
  var cl = new lightLoader(c, cw, ch);             
 
  setupRAF();
  cl.init();
}
收藏此文 赞一个 ( ) 打赏本站

如果本文对你有所帮助请打赏本站

  • 打赏方法如下:
  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
后台-系统设置-扩展变量-手机广告位-内容正文底部

相关推荐:

留言与评论(共有 0 条评论)
   
验证码:
二维码