gsap模拟镜头模糊虚化背景灯光模糊动画-html代码-BFW代码库

gsap模拟镜头模糊虚化背景灯光模糊动画

代码语言：html

所属分类：背景

代码描述：gsap模拟镜头模糊虚化背景灯光模糊动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  position:absolute;
}

html, body, #container {
  overflow:hidden;
  background:#000;
  width:100%;
  height:100%;
}
</style>

</head>
<body translate="no">
<canvas id="c"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.2.4.js"></script>
<script>
var n = 105,
    speed = 0.15;

// ...not these
var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    bg = new Image(),
    img = new Image(100,100),
    img2 = new Image(100,100),
    img3 = new Image(100,100),
    mouseProps = {x:cw/2, y:cw/2},
    particles = [],
    Particle = function(index) {
      this.index = index;
      this.img = [img,img2,img3][index%3];    	
      this.x = this.y = this.progress = this.opacity = this.scale = 1;
      this.size = 25 + 400*((index+1)/n); //min size+
      if (index>n*0.96) this.size*=4; //make some really big foreground particles
      
      this.dur = (2 - 1*((index+1)/n))/speed;
      	
    	var rot = -rand(3,5); 
	    if (index%3==0) rot= -rot;
	    
      this.draw = function() {
        var offsetX = -(mouseProps.x-cw/2)*(this.size/1000),
            offsetY = -(mouseProps.y-ch/2)*(this.size/1000),
            size = this.size*this.scale;
	    	ctx.translate( this.x+offsetX, this.y+offsetY );
	      ctx.rotate(rot*this.progress);
	      ctx.globalAlpha = this.opacity; //console.log(this.opacity)
	      ctx.drawImage(this.img, -size/2, -size/2, size, size);
	      ctx.rotate(-rot*this.progress);
	      ctx.translate( -this.x-offsetX, -this.y-offsetY );
	    }
    };


function setParticle(p, replay) {
  var _tl = gsap.timeline()
            .fromTo(p, {
                x:rand(-p.size/2, cw+p.size),
                y:rand(-p.size/2, ch+p.s.........完整代码请登录后点击上方下载按钮下载查看