粒子扩散

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var c = document.getElementById('canv');
var $ = c.getContext('2d');

var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;

$.fillStyle = 'hsla(0,0%,0%,1)';
$.fillRect(0, 0, w, h);

var u = 0;
var arr = [];

var w;
var h;

var str;
var strs = ['Life', 'Hope', 'Divinity', 'Promise', 'Creation', 'Potential', 'Harmony', 'Expansion', 'Ascension', 'Spirituality', 'Connection', 'Humanity', 'Acceptance', 'Transformation', 'Pride', 'Love', 'Unity'];

var _off = 150;
var _spr = 0.3;

var ms;

var txt = function() {
  str = strs[Math.floor(Math.random() * strs.length)];
  for (var i in strs) {
    $.fillStyle = 'hsla(' + u * i + ', 95%, 50%, 1)';
  }
  $.font = 'bold 100px "Georgia"';
  $.textAlign = 'left';
  $.textBaseline = 'middle';
  $.fillText(str, (w - $.measureText(str).width) * 0.5, h * 0.5);
};

var pixis = function() {
  var p = $.getImageData(0, 0, w, h);
  var pt = 0;

for (var i = 0; i < h; i += 1) {
    for (var j = 0; j < w; j += 1) {
      var r = p.data[pt];

if (r !== 0) {
        var e = p.data[pt + 1];
        var b = p.data[pt + 2];
        var a = p.data[pt + 3];
        var _px = new _Px(j, i, r, e, b, a);
        arr.push(_px);
      };
      pt += 4;
    };
  };
};

var save = function() {
  $.fillStyle = 'hsla(0,0%,0%,1)';
  $.fillRect(0, 0, w, h);
};

var msPos = function() {
  for (var i in arr) {
    u -= .5;
    if (!ms) return;

var _px = arr[i];

var dx = _px.x - ms.x;
    var dy = _px.y - ms.y;

var d = Math.sqrt(dx * dx + dy * dy);
    var minD = _px.w + _off;

if (d < minD) {
      var ang = Math.atan2(dy, dx);

var tx = ms.x + Math.cos(ang) * minD;
      var ty = ms.y + Math.sin(ang) * minD;

var ax = (tx - _px.x) * _spr;
      var ay = (ty - _px.y) * _spr;

_px.vx += ax;
      _px.vy += ay;
    };
  };
};

var txtPos = function() {
  if (arr.length === 0) {

delete arr[0];
    arr.splice(0);
    str = strs[Math.floor(Math.random() * strs.length)];
    go();
  } else {
    for (var i = 0; i < arr.length; i++) {
      var _px = arr[i];
      if (_px.y > h) {
        delete arr[i];
        arr.splice(i, 1);
      } else {
        break;
      };
    };
  };
};

var upd = function() {
  save();
  msPos();
  txtPos();
  fall();
};

var _Px = function(x, y) {
  this.w = 1;
  this.h = 1;
  this.x = x;
  this.y = y;
  this.vx = Math.random() * 5 - 2.5;
  this.vy = Math.random() * 5 - 2;
  this.color = 'hsla(' + u + ', 95%, 50%, 1)';
};

_Px.prototype = {
  move: function() {
    this.vx *= Math.random() * (1 - 0.8) + 0.4;
    this.vy *= Math.random() * (1 - 0.8) + 0.7;
    this.vy += Math.random() * 2;
    this.x += this.vx;
    this.y += this.vy;
  },

draw: function() {
    $.fillStyle = this.color;
    $.fillRect(this.x, this.y, this.w, this.h);
  }
};

var go = function() {
  txt();
  pixis();
};

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

var run = function() {
  window.requestAnimFrame(run);
  upd();
}

window.addEventListener('resize', function() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);

go();
run();

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