鼠标幽灵跟随粒子效果-html代码-BFW代码库

代码语言：html

所属分类：粒子

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

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


<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:100);
html, body {
  min-height: 100%;
  height: 100%;
}

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.75);
}

#title {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 20px;
  letter-spacing: 0.1em;
  z-index: 100;
}

#sub-title {
  position: fixed;
  top: 35px;
  left: 10px;
  font-size: 14px;
  letter-spacing: 0.1em;
  z-index: 100;
}

#canvas {
  position: absolute;
  left: 0;
  top: 0;
}
</style>

</head>
<body translate="no">
<h1 id="title">Mouse Orbit</h1>
<h2 id="sub-title">Ghost Particle Animation</h2>
<div id="container">
<canvas id="canvas"></canvas>
</div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/lodash.js"></script>
<script>
var PI2 = Math.PI * 2;
var HALF_PI = Math.PI / 2;

var isTouch = 'ontouchstart' in window;
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);

function Canvas(options) {
  options = _.clone(options || {});
  this.options = _.defaults(options, this.options);

  this.el = this.options.el;
  this.ctx = this.el.getContext('2d');

  this.dpr = window.devicePixelRatio || 1;

  this.updateDimensions();
  window.addEventListener('resize', this.updateDimensions.bind(this), false);
  this.resetTarget();

  if (isTouch) {
    // touch
    this.el.addEventListener('touchstart', this.touchMove.bind(this), false);
    this.el.addEventListener('touchmove', this.touchMove.bind(this), false);
    //   	this.el.addEventListener('touchend', this.resetTarget.bind(this), false);
  } else {
    // Mouse
    window.addEventListener('mousemove', this.mouseMove.bind(this), false);
    window.addEventListener('mouseout', this.resetTarget.bind(this), false);
  }

  this.setupParticles();

  this.loop();
}

Canvas.prototype.updateDimensions = function () {
  this.width = this.el.width = _.result(this.options, 'width') * this.dpr;
  this.height = this.el.height = _.result(this.options, 'height') * this.dpr;
  this.el.style.width = _.result(this.options, 'width') + 'px';
  this.el.style.height = _.result(this.options, 'height') + 'px';
};

// Update the orb target
Canvas.prototype.mouseMove = function (event) {
  this.target = new Vector(event.clientX * this.dpr, event.clientY * this.dpr);
};

// Reset to center when we mouse out
Canvas.prototype.resetTarget = function () {
  this.target = new Vector(this.width / 2, this.height / 2);
};

// Touch Eent
Canvas.prototype.touchMove = function (event) {
  if (event.touches.length === 1) {event.preventDefault();}

  this.target = new Vector(event.touches[0].pageX * this.dpr, event.touches[0].pageY * this.dpr);
};

// Defaults
Canvas.prototype.options = {
  count: 20,
  speed: 0.5,
  width: 400,
  height: 400,
  size: 10,
  radius: 5,
  background: '29, 22, 52',
  maxDistance: 100 };


Canvas.prototype.setupParticles = function () {
  this.particles = [];
  var index = -1;
  var between = PI2 / this.options.count;
  while (++index < this.options.count) {
    var x;
    var y;
    var angle;
    var max = Math.max(this.width, this.height);

    angle = (index + 1) * between;

    x = Math.cos(angle) * max;
    x += this.width / 2;

    y = Math.sin(angle) * max;
    y += this.height / 2;

    var particle = new Particle({
      x: x,
      y: y,
      radius: this.options.radius,
      size: this.options.size,
      angle: angle,
      color: this.options.color });


    this.particles.push(particle);
  }
};

Canvas.prototype.findClosest = function () {
  var index = -1;
  var pointsLength = this.particles.length;

  while (++index < pointsLength) {
    var closestIndex = -1;
    this.particles[index].closest = [];

    while (++closestIndex < pointsLength) {
      var closest = this.particles[closestIndex];
      var distance = this.particles[index].position.distanceTo(closest.position);
      if (distance < this.options.maxDistance) {
        var vector = new Vector(closest.position.x, closest.position.y);
        vector.opacity = 1 - distance / this.options.maxDistance;
        vector.distance = distance;
        this.particles[index].closest.push(vector);
      }
    }
  }
};

Canvas.prototype.loop = function () {
  //   this.clear();
  if (isTouch || isSafari) {
    this.ghost();
  } else {
    this.ghostGradient();
  }
  if (this.options.maxDistance > 0) {
    this.findClosest();
  }
  this.draw();

  window.requestAnimationFrame(_.bind(this.loop, t.........完整代码请登录后点击上方下载按钮下载查看