jquery跟随鼠标星星粒子动画特效自己动手改编，使用超简单
本帖最后由 yqsphp 于 2019-8-16 10:55 编辑近期在网上看到跟随鼠标星星粒子动画特效，感觉超酷有没有，所以我将源码down下来后提取主要的方法，
自己改编成任意地方都可用的插件，调用非常简单，页面代码超级简单，是不是很叼,需要引入jquery
注意：由于页面是从上到下执行，所以请将脚本放在页面底部执行
<body style="background: black;">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/move.min.js"></script>
<script type="text/javascript">
var config = {
width:1800, /*画布宽度*/
heigth:900, /*画布高度*/
color:"#fffefd",/*跟随鼠标的星星颜色*/
size:16, /*星星大小*/
shadow:1,/*星星阴影间距*/
};
$.show(config);
</script>
</body>
打开页面直接运行，在页面中直接引入js，调用就行了，都不需要自己动手创建div，canvas等
js源码如下
"use strict";
var defaults = {
width:1800, /*画布宽度*/
heigth:900, /*画布高度*/
color:"#fffefd",/*跟随鼠标的星星颜色*/
size:16, /*星星大小*/
shadow:1,/*星星阴影间距*/
};
var Stage =function() {
function t(t, n, i) {
//基本样式
var str = "<style>#"+t+"{position: fixed;top: 0;left: 0;z-index: 100;pointer-events: none;}</style><canvas id="+t+"></canvas>";
$("body").prepend(str);
var e = this;
e.canvas = document.getElementById(t);
e.ctx = e.canvas.getContext("2d");
e.renderList = [];
e.needClear = !0;
e.canvas.width = n || $(window).width();
e.canvas.height = i || $(window).height();
$(window).on("resize", function() {
e.canvas.width = n || $(window).width();
e.canvas.height = i || $(window).height();
})
}
return window.requestAnimationFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(t) {
window.setTimeout(t, 1e3 / 60)
}
}(), t.prototype.update = function() {
var t = this;
t.needClear && t.ctx.clearRect(0, 0, t.canvas.width, t.canvas.height), t.renderList.forEach(function(n) {
n(t.ctx, t.canvas)
}), requestAnimationFrame(function() {
t.update()
})
}, t.prototype.onUpdate = function(t) {
this.renderList.push(t)
}, t
}();
var Twinkle = function() {
function t(t, e, a) {
this.initSymbols(t, e, a), this.particles = [], this._pool = [], this.mouse = new s
}
function s(t, s) {
this.x = t || 0, this.y = s || 0
}
function e(t, s, e) {
this.color = n(t), this.size = 2 * (s + e);
console.log(this.color);
for (var a = 0, i = o.length; i > a; a++) this.push(this._createSymbol(o, s, e))
}
function a(t, s, e, a, i, o) {
this.init(t, s, e, a, i, o)
}
function i(t, s, e, a, i) {
return "rgba" === t ? "rgba(" + s + "," + e + "," + a + "," + i + ")" : "hsla" === t ? "hsla(" + s + "," + e + "%," + a + "%," + i + ")" : ""
}
if (!document.createElement("canvas").getContext) return $.noop;
var o = ,
h = 2500;
t.prototype = {
mouse: null,
gravity: .035,
initSymbols: function(t, s, a) {
this._symbols = new e(t, s, a)
},
render: function(t) {
var s, e, a, i, o, n, r, l, p, c, d, m, u, y, g, f = this.particles,
v = this.mouse,
b = this.gravity,
M = this._symbols,
x = this._symbols.length,
_ = this._symbols.size,
w = .5 * this._symbols.size,
I = t.canvas.width,
$ = t.canvas.height;
if (s = Math.min(.005 * (v.speedX * v.speedX + v.speedY * v.speedY), 1), f.length < h) for (e = .5 + 4.5 * s, a = .1 + .5 * s, i = .5 + .5 * s, y = (3 * Math.random() | 0) + (20 * s | 0), u = 0; y > u; u++) this._createParticle(a, e, i);
for (p = .5 * -I, c = 1.5 * I, d = .5 * -$, m = 1.5 * $, u = 0, y = f.length; y > u; u++) g = f, g.vx += .03 * v.speedX * s, g.vy += .03 * v.speedY * s + b, g.x += g.vx + v.speedX, g.y += g.vy + v.speedY, g.scale -= .005, g.angle += Math.random(), g.x + w < p || g.x - w > c || g.y + w < d || g.y - w > m || g.scale <= 0 ? (this._pool.push(g), f.splice(u, 1), y--, u--) : (l = g.scale, o = M, Math.random() < .7 && (l *= .2), n = _ * l, r = .5 * n, t.save(), t.globalCompositeOperation = "lighter", t.translate(g.x, g.y), t.rotate(g.angle), t.drawImage(o, 0, 0, _, _, -r, -r, n, n), t.restore());
t.fill(), v.speedX = v.speedY = 0
},
_createParticle: function(t, s, e) {
var i = t + (s - t) * Math.random(),
o = 2 * Math.PI * Math.random(),
h = this._pool.length ? this._pool.shift() : new a;
h.init(this.mouse.x, this.mouse.y, i * Math.cos(o), i * Math.sin(o), e * Math.random(), 2 * Math.PI * Math.random()), this.particles.push(h)
}
}, s.prototype = {
x: 0,
y: 0,
speedX: 0,
speedY: 0,
update: function(t, s) {
this.speedX = .7 * (this.x - t), this.speedY = .7 * (this.y - s), this.x = t, this.y = s
}
}, e.prototype = [], e.prototype._createSymbol = function(t, s, e) {
var a, o, h = this.size,
n = this.size / 2,
r = this.color;
a = document.createElement("canvas"), a.width = a.height = h, o = a.getContext("2d"), o.fillStyle = i(r, r, r, r, r), o.shadowBlur = e, o.shadowColor = i(r, r, r, r, .75 * r);
var l, p, c, d;
for (o.beginPath(), l = 1, p = 2 * t; p >= l; l++) c = l % 2 ? .1 * s : s, d = 2 * Math.PI * l / p, o(n + c * Math.cos(d), n + c * Math.sin(d));
return o.fill(), a
}, a.prototype.init = function(t, s, e, a, i, o) {
this.x = t || 0, this.y = s || 0, this.vx = e || 0, this.vy = a || 0, this.scale = i || 0, this.angle = o || 0
};
var n = function() {
var t = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/,
s = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d\.]+)\s*\)$/,
e = /^hsl\(\s*([\d\.]+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*\)$/,
a = /^hsla\(\s*([\d\.]+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)\s*\)$/,
i = /^({2})({2})({2})$/;
return function(o) {
o = o.replace(/^\s*#|\s*$/g, ""), o = o.toLowerCase();
var h;
return (h = o.match(t) || o.match(s)) ? ["rgba", parseInt(h, 10), parseInt(h, 10), parseInt(h, 10), parseFloat(4 === h.length ? 1 : h)] : (h = o.match(e) || o.match(a)) ? ["hsla", parseFloat(h), parseFloat(h), parseFloat(h), parseFloat(4 === h.length ? 1 : h)] : (3 === o.length && (o = o.replace(/(.)/g, "$1$1")), (h = o.match(i)) ? ["rgba", parseInt(h, 16), parseInt(h, 16), parseInt(h, 16), 1] : null)
}
}();
return t
}();
;(function($){
$.extend({
show:function(config) {
var config = $.extend(defaults,config);
var h = function() {
return /(msie|trident)/.test(navigator.userAgent.toLowerCase())
};
if (!document.createElement("canvas").getContext || h()) return void $("canvas").remove();
var v = new Stage("stage",defaults.width,defaults.heigth),
m = new Twinkle(defaults.color, defaults.size, defaults.shadow);
m.mouse.update(0, 0);
$(window).on("mousemove", function(e) {
m.mouse.update(e.clientX, e.clientY)
});
v.onUpdate(function(e) {
m.render(e)
});
v.update();
}
});
})(jQuery);
一部分代码改了后不需要页面写div，css等了，直接script{:301_997:}
蓝奏云：https://www.lanzouj.com/i5lj2eb
有需要的拿在，打开文件中的index就可看到效果了 本帖最后由 yqsphp 于 2019-8-16 11:06 编辑
tjx0722 发表于 2019-8-16 10:57
请教一下这个应该在哪里修改粒子形状呢？
_createParticle: function(t, s, e) {
var i = t + (s - t) * Math.random(),
o = 2 * Math.PI * Math.random(),
h = this._pool.length ? this._pool.shift() : new a;
h.init(this.mouse.x, this.mouse.y, i * Math.cos(o), i * Math.sin(o), e * Math.random(), 2 * Math.PI * Math.random()), this.particles.push(h)
}这里是改粒子的，我自己都看晕 还不太会玩 摸索中 加个分 感谢 感觉这样实现好麻烦{:301_1008:}用three挺好的 有点意思 大佬大佬。膜拜一下哈哈 请教一下这个应该在哪里修改粒子形状呢？ 再次回帖 很好很过瘾 要是能变成鼠标指针的特效就更爽了 有点意思 感谢分享 学习一波，谢谢分享
页:
[1]
2