2017.12.31 听说冬天和雪花更配哦

发布于 2017-12-31  894 次阅读


#转自fczbl.vip

前言

又到了白色相簿的季节,给博客加上雪花效果是再好不过的了。
这个效果是在jad大佬的博客看到的,然后就扒过来了。今天jad大佬把它做成了Typecho插件,我就做了个WordPress的
插件特点:

  1. 较低的 CPU 消耗,移动端效果良好
  2. 原生 JavaScript 实现,不依赖Dependencies其他类库
  3. 丰富的自定义项,可自定义多种选项

Typecho插件

https://github.com/journey-ad/Snow-Typecho-Plugin

WordPress插件

https://github.com/xb2016/Snow-WordPress-Plugin

通用教程

1.创建画布
<canvas id="Snow"></canvas>
2.引入JS

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;
})();
(function() {
var flakes = [],
canvas = document.getElementById("Snow"), //画布ID,与上一步创建的画布对应
ctx = canvas.getContext("2d"),
flakeCount = 200, //雪花数量,数值越大雪花数量越多
mX = -100,
mY = -100;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function snow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < flakeCount; i++) {
var flake = flakes[i],
x = mX,
y = mY,
minDist = 150, //雪花距离鼠标指针的最小值,小于这个距离的雪花将受到鼠标的排斥
x2 = flake.x,
y2 = flake.y;

var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
dx = x2 - x,
dy = y2 - y;

if (dist < minDist) {
var force = minDist / (dist * dist),
xcomp = (x - x2) / dist,
ycomp = (y - y2) / dist,
deltaV = force / 2;

flake.velX -= deltaV * xcomp;
flake.velY -= deltaV * ycomp;

} else {
flake.velX *= .98;
if (flake.velY <= flake.speed) { flake.velY = flake.speed } flake.velX += Math.cos(flake.step += .05) * flake.stepSize; } ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; //雪花颜色 flake.y += flake.velY; flake.x += flake.velX; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) {
reset(flake);
}

ctx.beginPath();
ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(snow);
};

function reset(flake) {
flake.x = Math.floor(Math.random() * canvas.width);
flake.y = 0;
flake.size = (Math.random() * 3) + 2; //加号后面的值,雪花大小,为基准值,数值越大雪花越大
flake.speed = (Math.random() * 1) + 0.5; //加号后面的值,雪花速度,为基准值,数值越大雪花速度越快
flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.3; //加号后面的值,为基准值,范围0~1
}

function init() {
for (var i = 0; i < flakeCount; i++) {
var x = Math.floor(Math.random() * canvas.width),
y = Math.floor(Math.random() * canvas.height),
size = (Math.random() * 3) + 2, //加号后面的值,雪花大小,为基准值,数值越大雪花越大
speed = (Math.random() * 1) + 0.5, //加号后面的值,雪花速度,为基准值,数值越大雪花速度越快
opacity = (Math.random() * 0.5) + 0.3; //加号后面的值,为基准值,范围0~1

flakes.push({
speed: speed,
velY: speed,
velX: 0,
x: x,
y: y,
size: size,
stepSize: (Math.random()) / 30 * 1, //乘号后面的值,雪花横移幅度,为基准值,数值越大雪花横移幅度越大,0为竖直下落
step: 0,
angle: 180,
opacity: opacity
});
}

snow();
};

document.addEventListener("mousemove", function(e) {
mX = e.clientX,
mY = e.clientY
});
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
init();
})();

3.引入CSS

#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(125,137,95,0.1);
    pointer-events: none;
}

公交车司机终于在众人的指责中将座位让给了老太太