Home > Web Front-end > H5 Tutorial > Detailed introduction to the progress bar graphic code of HTML5 super cool particle effect

Detailed introduction to the progress bar graphic code of HTML5 super cool particle effect

黄舟
Release: 2017-03-30 10:37:57
Original
2473 people have browsed it

This is a progress bar application based on HTML5 and JavaScript. This progress bar plug-in is very unique. It is displayed when the progress is displayed. The animation effect of particles, that is to say, while the progress bar is sliding, some small particles will fall down, and the effect is very cool. Another feature is that as the progress changes, the color of the progress bar will also change.

JavaScript code

/*========================================================*/  
/* 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 = &#39;#000&#39;;
		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 = &#39;hsla(&#39;+this.hue+&#39;, 100%, 40%, 1)&#39;;
		this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);

		this.ctx.fillStyle = &#39;#222&#39;;
		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 = &#39;hsla(&#39;+this.hue+&#39;, 100%, &#39;+_this.rand(50,70)+&#39;%, &#39;+_this.rand(20,100)/100+&#39;)&#39;;
		_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 = &#39;source-over&#39;;
		this.ctx.clearRect(0,0,this.cw,this.ch);					
		this.ctx.globalCompositeOperation = &#39;lighter&#39;;
	};

	/*========================================================*/	
	/* 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(&#39;canvas&#39;);
	return !!(elem.getContext && elem.getContext(&#39;2d&#39;));
};

/*========================================================*/	
/* Setup requestAnimationFrame
/*========================================================*/
var setupRAF = function(){
	var lastTime = 0;
	var vendors = [&#39;ms&#39;, &#39;moz&#39;, &#39;webkit&#39;, &#39;o&#39;];
	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){
		window.requestAnimationFrame = window[vendors[x]+&#39;RequestAnimationFrame&#39;];
		window.cancelAnimationFrame = window[vendors[x]+&#39;CancelAnimationFrame&#39;] || window[vendors[x]+&#39;CancelRequestAnimationFrame&#39;];
	};

	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(&#39;canvas&#39;);
  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();
}
Copy after login

The above is the progress bar graphic and text of HTML5 super cool particle effect For a detailed introduction to the code, please pay attention to the PHP Chinese website (m.sbmmt.com) for more related content!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template