粒子悬浮动态交互跳跃效果-html代码-BFW代码库

粒子悬浮动态交互跳跃效果

代码语言：html

所属分类：粒子

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
body{background-color:#000;overflow: hidden}canvas{position:absolute;top:calc( 50% - 250px );left:calc( 50% - 250px );box-shadow:0 0 2px #111;border-radius:250px;}p{font:20px Helvetica;color:#eee;position:absolute;width:500px;text-align:center;top:calc( 50% - 300px );left:calc( 50% - 250px );}
</style>
</head>
<body>
<canvas id=c></canvas>
<script>
	var s = c.width = c.height = 500
  , ctx = c.getContext( '2d' )

  , opts = {
    particles: 200,
    particleBaseSize: 4,
    particleAddedSize: 1,
    particleMaxSize: 5,
    particleBaseLight: 5,
    particleAddedLight: 30,
    particleBaseBaseAngSpeed: .001,
    particleAddedBaseAngSpeed: .001,
    particleBaseVariedAngSpeed: .0005,
    particleAddedVariedAngSpeed: .0005,
    sourceBaseSize: 3,
    sourceAddedSize: 3,
    sourceBaseAngSpeed: -.01,
    sourceVariedAngSpeed: .005,
    sourceBaseDist: 130,
    sourceVariedDist: 50,
    
    particleTemplateColor: 'hsla(hue,80%,light%,alp)',
    repaintColor: 'rgba(0,0,0,.1)',
    enableTrails: false
  }
  
  , util = {
    square: x => x*x,
    tau: 6.2831853071795864769252867665590057683943
  }
    
  , particles = []
  , source = new Source
  , tick = 0;

function Particle() {
  this.dist = ( Math.sqrt( Math.random() ) ) * s / 2;
  this.rad = Math.random() * util.tau;
  
  this.baseAngSpeed = opts.particleBaseBaseAngSpeed + opts.particleAddedBaseAngSpeed * Math.random();
  this.variedAngSpeed = opts.particleBaseVariedAngSpeed + opts.particleAddedVariedAngSpeed * Math.random();
  this.size = opts.particleBaseSize + opts.particleAddedSize * Math.random();
}
Particle.prototype.step = function() {
  var angSpeed = this.baseAngSpeed + this.variedAngSpeed * Math.sin( this.rad * 7 + tick / 100 );
  this.rad += angSpeed;
  
  var x = this.dist * Math.cos( this.rad )
    , y = this.dist * Math.sin( this.rad )
  
    , squareDist = util.square( x - source.x ) + util.square( y - source.y )
    , sizeProp = Math.pow( s, 1/2 ) / Math.pow( squareDist, 1/2 )
    , color = opts.particleTempl.........完整代码请登录后点击上方下载按钮下载查看