前言
又到了白色相簿的季节,给博客加上雪花效果是再好不过的了。
这个效果是在jad大佬的博客看到的,然后就扒过来了。
插件特点:
- 较低的 CPU 消耗,移动端效果良好
- 原生 JavaScript 实现,不依赖其他类库
- 丰富的自定义项,可自定义多种选项
教程
1. 创建画布
在方便的地方插入以下代码:
1 | <canvas id="Snow"></canvas> |
2. 引入JS
重要的数值已在注释中给出
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | (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
背景颜色可根据自身需要改变
1 2 3 4 5 6 7 8 9 10 | #Snow{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(125,137,95,0.1); pointer-events: none; } |