51工具盒子前言 {#前言}
之前从其他博客哪里搬了一个樱花落叶效果。但是我本人不是很喜欢那个樱花，而且那个樱花效果太密集太大了。很影响阅读体验，可以说是一个负优化。我这个人要求比较高，自然是很不满意这个效果，所以，我把代码稍微的改动了一下，达成了现在的效果。
改动步骤 {#改动步骤}
我当时将JS实装到博客后发现这个樱花的色调和我的博客非常的不符合，毕竟白色和樱色的对冲太明显，所以我当时考虑过替换成白色花瓣，和金色落叶。但是因为白色花瓣实在是太不明显了，当时博客很多白色区块。看上去就和没有装这个JS一样，就没啥意义。
然后自然就选择了金色的落叶，毕竟白色配这种毕竟偏向金色的落叶还是挺好看的。
但是很快就发现了另一个问题，这个落叶....
太密集了就会挡视线啦！
于是对JS再加工，将数量和大小降低，从而不是那么的挡视线而是一种装饰效果啦。总体来说这个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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | var stop, staticx; var img = new Image(); img.src = "https://img.cdn.nesxc.com/2022/02/202202251325420webp"; function Sakura(x, y, s, r, fn) { this.x = x; this.y = y; this.s = s; this.r = r; this.fn = fn } Sakura.prototype.draw = function(cxt) { cxt.save(); var xc = 20 * this.s / 2; cxt.translate(this.x, this.y); cxt.rotate(this.r); cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s); cxt.restore() }; Sakura.prototype.update = function() { this.x = this.fn.x(this.x, this.y); this.y = this.fn.y(this.y, this.y); this.r = this.fn.r(this.r); if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) { this.r = getRandom("fnr"); if (Math.random() > 0.4) { this.x = getRandom("x"); this.y = 0; this.s = getRandom("s"); this.r = getRandom("r") } else { this.x = window.innerWidth; this.y = getRandom("y"); this.s = getRandom("s"); this.r = getRandom("r") } } }; SakuraList = function() { this.list = [] }; SakuraList.prototype.push = function(sakura) { this.list.push(sakura) }; SakuraList.prototype.update = function() { for (var i = 0, len = this.list.length; i < len; i++) { this.list[i].update() } }; SakuraList.prototype.draw = function(cxt) { for (var i = 0, len = this.list.length; i < len; i++) { this.list[i].draw(cxt) } }; SakuraList.prototype.get = function(i) { return this.list[i] }; SakuraList.prototype.size = function() { return this.list.length }; function getRandom(option) { var ret, random; switch (option) { case "x": ret = Math.random() * window.innerWidth; break; case "y": ret = Math.random() * window.innerHeight; break; case "s": ret = Math.random(); break; case "r": ret = Math.random() * 4; break; case "fnx": random = -0.5 + Math.random() * 1; ret = function(x, y) { return x + 0.5 * random - 1.7 }; break; case "fny": random = 1.5 + Math.random() * 0.7; ret = function(x, y) { return y + random }; break; case "fnr": random = Math.random() * 0.03; ret = function(r) { return r + random }; break } return ret } function startSakura() { requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame; var canvas = document.createElement("canvas"), cxt; staticx = true; canvas.height = window.innerHeight; canvas.width = window.innerWidth; canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;"); canvas.setAttribute("id", "canvas_sakura"); document.getElementsByTagName("body")[0].appendChild(canvas); cxt = canvas.getContext("2d"); var sakuraList = new SakuraList(); for (var i = 0; i < 50; i++) { var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny; randomX = getRandom("x"); randomY = getRandom("y"); randomR = getRandom("r"); randomS = getRandom("s"); randomFnx = getRandom("fnx"); randomFny = getRandom("fny"); randomFnR = getRandom("fnr"); sakura = new Sakura(randomX, randomY, randomS, randomR, { x: randomFnx, y: randomFny, r: randomFnR }); sakura.draw(cxt); sakuraList.push(sakura) } stop = requestAnimationFrame(function() { cxt.clearRect(0, 0, canvas.width, canvas.height); sakuraList.update(); sakuraList.draw(cxt); stop = requestAnimationFrame(arguments.callee) }) } window.onresize = function() { var canvasSnow = document.getElementById("canvas_snow") }; img.onload = function() { startSakura() }; function stopp() { if (staticx) { var child = document.getElementById("canvas_sakura"); child.parentNode.removeChild(child); window.cancelAnimationFrame(stop); staticx = false } else { startSakura() } }; |
引入JS特效 {#引入JS特效}
将这段代码引入博客就行了。
直接html代码引入
|-----------|-----------------------------------------------|
| 1 | <script src="/js/leaves.js"></script> |
或者修改主题配置文件_config.butterfly.yml
|-----------------|----------------------------------------------------------------------|
| 1 2 3 4 | inject: head bottom: - <script src="/js/leaves.js"></script> |
参考链接：https://cloud.tencent.com/developer/article/1948591
