图片 2

1、HTML5/CSS3图片加载进度条 可切换多主题,粒子动画在HTML5应用中也是比较消耗本地资源的

本文由码农网 –
小峰原创,转发请看清文末的转发须要,应接插手大家的付费投稿安插!

HTML5确实充裕有力,相当多时候我们得以选拔HTML5中的新技艺达成丰硕光彩夺目的粒子动漫效果,粒子动漫在HTML5用到中也是相比消耗本地财富的,特别是CPU,可是有些HTML5粒子效果确实能给客商带来差别的惊艳顾客体验。本文便是要分享8款效果惊艳的HTML5粒子动漫特效,希望您能够赏识。

图片 1

这是一款基于HTML5和JavaScript的进程条应用,那款进度条插件极度常有风味,它在速度展现的时候展现粒子的动漫效果,也正是说,进程条在滑行的还要,会发生一些小粒子掉落下来,效果相当帅。其余还应该有叁个特色是随着速度的变动,进度条的颜色也会转移。

1、HTML5 Canvas粒子模拟效果

那是一款选用HTML5
Canvas模拟出来的30000个粒子动漫,当你用鼠标在canvas画布上运动时,鼠标周围的一部分粒子就能随着你运动,并转身一变一定的美术,就疑似您在玩沙画雷同,效果非常科学。这里,大家使用了一部分HTML5的性子,让这几个粒子动漫显得万分振作振奋。

在线演示 / 源码下载

昨天大家要享用9款极具创新意识的HTML5/CSS3进程条动漫,这个进程条只怕能够帮你加强顾客交互作用和增进客商体验,钟爱的爱人就珍藏了吧。

图片 2

2、HTML5 Canvas生成粒子效果的人选头像

面前大家大饱眼福过二个HTML5
Canvas实现的图像奥兰多克模糊效果,HTML5拍卖图片真的特别轻巧。前些天我们要再利用HTML5
Canvas实现三个粒子效果的人选头像,你能够轻松选用一张头像图片,接下去该图形会被击溃成大多粒子,然后稳步的重新组合成图片,鼠标滑过图片时粒子还可能会晤世变化的动漫片特效,看上去非常的帅。

在线演示 / 源码下载

1、HTML5/CSS3图片加载进程条 可切换多主题

在线演示源码下载

3、HTML5 Canvas达成会跳舞的日子动漫

那是一款很风趣的HTML5
Canvas时间动漫,总体来讲,它是多少个得以和客商端一齐的手表,其特征是那时间接触时,数字将会散开成叁个个粒子动漫,这种HTML5
Canvas动画在以前也可能有分享过,比如这些HTML5粒子文字特效。

在线演示 / 源码下载

前不久要享受的这款HTML5/CSS3进度条模拟了实在的图纸加载场景,插件会私下认可去从服务器下载几张家振大的图样,然后让该进程条展现前段时间读取图片的快慢,让示范变得拾贰分实在。其它该CSS3进程条还足以切换八个宗旨样式,外观特别优异。

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

在线演示源码下载

如上那款炫耀的HTML5进程条动漫能够使用在不一致风格的民用博客页面加载中,希望您心爱。

4、HTML5 Canvas粒子效果文字动漫特效

前边我们享受过不菲超酷的文字特效,当中也可以有应用HTML5和CSS3的。今日大家要来分享一款基于HTML5
Canvas的文字特效,输入框中输入想要展现的文字,回车的前边就可以在canvas上绘制出粒子效果的文字动漫,十分酷的动漫片效果。

在线演示 / 源码下载

在线演示 源码下载

5、HTML5火花文字特效

事情发生此前大家大饱眼福过无数基于HTML5和CSS3的文字特效,有3D的文字效果,也许有动漫文字特效。明日大家享受的那款HTML5文字特效是火焰点火的功力,比较消耗CPU,可是动漫效果依然相比酷的。其它,再引入一款HTML5文字特效:HTML5像素文字爆炸重新整合动漫特效

在线演示 / 源码下载

2、HTML5超具喜感的加载提示 转圈的胖娃娃

6、HTML5/CSS3粒子效果进程条 超炫人眼目进程条动漫

事情发生从前本身已经享受了两款效果非常不错的CSS3进程条插件,比如CSS3
Loading进度条加载动漫特效、CSS3
3D进度条按钮18款不错样式。今日我再来分享一款很有特点的HTML5/CSS3进程条应用。那款进程条插件在播放进程进程中现身粒子效果,犹如一些小颗粒从进程条上散落下来,是一款别具特色的HTML5进度条插件。

在线演示 / 源码下载

事前大家享受过两款HTML5/CSS3过程条加载插件,非常是这款CSS3
3D进程条开关确实是老大酷。前日我要像各位分享一款接受HTML5和CSS3完成的新意Loading提醒,是四个超具喜感的转圈胖孩子,那款HTML5进度提醒插件符合利用在全屏页面加载的唤醒应用中。

7、HTML5粒子效果的文字动画特效

回想在此之前向我们大饱眼福过一款HTML5
Canvas落成会跳舞的日子动漫,利用了HTML5的粒子动漫天性。明天要分享的也是一款基于HTML5的粒子效果的文字动漫特效,而且它能够兑现各个文字的逐帧播放,产生一句很性感的诗词。

在线演示 / 源码下载

在线演示 源码下载

8、HTML5 Canvas 3D 倒计时爆炸特效

今日要享受的那款 HTML5 3D 动漫特效特别给力,它是二个依照Canvas
的倒计时爆炸效果,随着岁月的接触,时间数字傍边就能够有爆炸的特效,一批像素点就能够在数字为主发生出来,认为非常酷。并且动用了
HTML5 的 3D 特性,让整一个机械钟显得极其常有立体感。

在线演示 / 源码下载

如上就是8款惊艳的HTML5粒子动漫特效,接待分享收藏。

3、纯CSS3落到实处动态Loading加载 仅6个span标签

前边大家介绍过七款具有种种卡通效果的CSS3进程条,大家得以在CSS3进程条栏目中查看演示和下载源码。今日我们再介绍一款达成一级轻巧的CSS3进程条动漫,该进程条是条形进程条,仅用了6个span标签和呼应的CSS3代码完毕了该CSS3条形进程条。

在线演示 源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注