3d粒子特效

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var c = document.getElementById('canv');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var $ = c.getContext("2d");
/*
Thanks Jack Rugile for this gradient cache fix for a perf boost - 
he's awesome - 
y'all should be following him if you're not already...( @jackrugile ;) 
*/
var _c = document.createElement('canvas');
var _w = _c.width = 100;
var _h = _c.height = 100;
var $$ = _c.getContext("2d");
var gc = $$.createRadialGradient(
  _w / 2,
  _h / 2,
  0,
  _w / 2,
  _h / 2, (_w / 2) * 1.5
);
gc.addColorStop(0, 'hsla(218, 95%, 85%, 1)');
gc.addColorStop(1, 'hsla(218, 100%,85%,0.1)');
$$.fillStyle = gc;
$$.beginPath();
$$.arc(_w / 2, _h / 2, _w / 2, 0, Math.PI * 2);
$$.fill();

var num = 8000;
var _x = 0;
var _y = 0;
var _z = 200;
var u = 0;
var dtr = function(d) {
  return d * Math.PI / 180;
};

var rnd = function() {
  return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
};

var dst = function(p1, p2, p3) {
  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
};

(function() {

Verts.prototype.updvtx = function() {
    this.transOut = trans.calc(
      this.transIn.vtx,
      this.transIn.sz,
      this.transIn.rot,
      this.transIn.pos,
      cam.disp
    );
  };

var Obj = function() {

this.vel = 0.04;
    this.maxt = 360;
    this.diff = 200;
    this.pos = 100;

this.tx = _x;
    this.ty = _y;
    this.u = 0;
    this.set();

};

Obj.prototype.set = function() {
    this.c = c;
    this.$ = $;
    this.v = [];
    this.dist = [];
    this.reps = [];

for (var i = 0, len = num; i < len; i++) {
      this.v[i] = new Verts({
        vtx: {
          x: rnd(),
          y: rnd(),
          z: rnd()
        },
        sz: {
          x: 0,
          y: 0,
          z: 0
        },
        rot: {
          x: 20,
          y: -20,
          z: 0
        },
        pos: {
          x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
          y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
          z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
        }
      });
      this.reps[i] = {
        x: 360 * Math.random(),
        y: 360 * Math.random(),
        z: 360 * Math.random()
      };
    }

this.rots = {
      x: 0,
      y: 0,
      z: 0
    };

this.size = {
      x: w / 5,
      y: h / 5,
      z: w / 5
    };
  };

Obj.prototype.obj = function() {
    this.v.push(new Verts({
      vtx: {
        x: rnd(),
        y: rnd(),
        z: rnd()
      },
      sz: {
        x: 0,
        y: 0,
        z: 0
      },
      rot: {
        x: 20,
        y: -20,
        z: 0
      },
      pos: {
        x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
        y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
        z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
      }
    }));
    this.reps.push({
      x: 360 * Math.random(),
      y: 360 * Math.random(),
      z: 360 * Math.random()
    });
  };

Obj.prototype.upd = function() {
    cam.prime.x += (this.tx - cam.prime.x) * 0.05;
    cam.prime.y += (this.ty - cam.prime.y) * 0.05;
  };

Obj.prototype.draw = function() {
    this.$.clearRect(0, 0, this.c.width, this.c.height);
    cam.upd();
    this.rots.x += 0.1;
    this.rots.y += 0.1;
    this.rots.z += 0.1;

for (var i = 0; i < this.v.length; i++) {

for (var val in this.reps[i]) {
        if (this.reps[i].hasOwnProperty(val)) {
          this.reps[i][val] += this.vel;
          if (this.reps[i][val] > this.maxt) this.reps[i][val] = 0;
        }
      }

this.v[i].transIn.pos = {
        x: this.diff * Math.cos(this.reps[i].x * Math.PI / 180),
        y: this.diff * Math.sin(this.reps[i].y * Math.PI / 180),
        z: this.diff * Math.sin(this.reps[i].z * Math.PI / 180)
      };

this.v[i].transIn.rot = this.rots;
      this.v[i].transIn.sz = this.size;
      this.v[i].updvtx();

if (this.v[i].transOut.p < 0) continue;
      this.$.drawImage(_c, this.v[i].transOut.x, this.v[i].transOut.y, this.v[i].transOut.p * 4, this.v[i].transOut.p * 4);

}

};

Obj.prototype.loop = function() {
    window.requestAnimationFrame = (function() {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback, element) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();

var loop = function() {
      this.upd();
      this.draw();
      window.requestAnimationFrame(loop);
    }.bind(this);
    loop();
  };

Obj.prototype.run = function() {

this.loop();

window.addEventListener('mousemove', function(e) {
      this.tx = (e.clientX - this.c.width / 2) * -0.8;
      this.ty = (e.clientY - this.c.height / 2) * 0.8;
    }.bind(this));

window.addEventListener('touchmove', function(e) {
      e.preventDefault();
      this.tx = (e.touches[0].clientX - this.c.width / 2) * -0.8;
      this.ty = (e.touches[0].clientY - this.c.height / 2) * 0.8;
    }.bind(this));

};
  var o = new Obj();
  o.run();
})();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg