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


Posted in HTML / CSS onAugust 23, 2019

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

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

JavaScript代码

/*========================================================*/  
/* 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();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 #HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 #HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 #HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 #HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 #HTML / CSS
HTML5自定义属性的问题分析
Aug 16 #HTML / CSS
HTML5实现视频弹幕功能
Aug 09 #HTML / CSS
You might like
杏林同学录(七)
2006/10/09 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
vue中activated的用法
2021/01/03 Vue.js
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
python类的继承实例详解
2017/03/30 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python进行TCP端口扫描的实现
2018/12/21 Python
详解python播放音频的三种方法
2019/09/23 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
servlet面试题
2012/08/20 面试题
艺术应用与设计个人的自我评价
2013/11/23 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
校园达人秀策划书
2014/01/12 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
个人年终总结开头
2015/03/06 职场文书
教师求职简历自我评价
2015/03/10 职场文书
学校国庆节活动总结
2015/03/23 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
会计主管竞聘书
2015/09/15 职场文书
班主任培训研修日志
2015/11/13 职场文书