【博客美化】新年啦,给自己博客加个雪花效果吧~ - YJLAugus
source link: https://www.cnblogs.com/yjlblog/p/8157414.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
[博客美化]新年啦,给自己博客加个雪花效果吧~ - YJLAugus - 博客园
今天是2017 的最后一天,首先祝福大家新年快乐,能在自己新的一年里开心快乐,幸福。转眼间,又到了白雪飘飞的冬季,相信好多地方都下雪了吧,突发奇想,给自己博客加上了雪花飘落效果。当然了,有写的不好的地方,大家打我就好~~
http://www.cnblogs.com/yjlblog/ (本来想着上传一个gif..好像是太大了...就上传失败了)
- 添加js文件
(1)前提是开通了权限
哦,然后把 xue.js
文件上传到自己博客中;
(2)创建画布(放在页尾);
<div class="Snow">
<canvas id="Snow"></canvas>
</div>
- 引入js文件(放在页尾);
<script src="https://files.cnblogs.com/files/yjlblog/xue.js"></script>
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();
})();
添加样式
- 添加样式(自定义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;
}
部分资源来源网络 版权归@ 猫与向日葵 所有,如有写的不对之处,欢迎大家指正~~感激不尽~
Recommend
-
70
技巧1:优质软件小编建议大家使用新软件,因为优化好、效果多的Office可以提高工作效率。但是,软件不是最主要的因素,不是所有人用最新的软件就能做出优质PPT。Office最好高于2010版本,WPS最好高于2013版本。如果电脑性能实在不给力,就不要逞强,要不然反而会拖...
-
72
-
89
文章发布于800天前,可能有所发展或是改变 一直有人问关于博客园看板娘的是如何加上去的,一开始的时候的确踩了很多坑,还有,这个美化博客这个事情,大家还是时刻适可而止的好,不然永远没有尽头,把自己...
-
58
-
61
-
21
很多小伙伴是不是对于自己的博客主题用久了就会产生些许厌烦呢?每个人都会有,也就是 '贝勃定律' 。那么为了解决这样的问题呢,许多小伙伴就会再次的更改自己的样式。这样一来,原来的博客样式就会被丢弃,这样
-
2
光的瞬间2021-02-26 887Hexo Boot 博客系统断断续续更好了好几个版本,除了新增后台管理系统的功能外,还对默认主题 UI 进行调整。但众口难调,并不是每次 UI 的修改都符合每个人的审美。故默认主题 UI 此后不再随后端代码进行同步美化和修改,本篇...
-
7
欧雷说:「这两年一直想给自己的网站加个注册用户的功能。在这里,“用户”相当于是“粉丝”,这样一来就可以简单地划...」 欧雷 发表于 2022-01-12 08:08 这两年一直想给...
-
4
注意,本文方法主要用于 Butterfly 主题,其他主题需要有一定的前端知识 !!!DIY 前请先备份!!!本文基于 Butterfly 主题 3.0.0 之前的版本修改!3.0.0 版本之后的部分内容可能需要调整!对前端及自己使用...
-
4
SnowFlake 介绍 SnowFlake 中文意思为雪花,故称为雪花算法。 最早是 Twitter 公司在其内部用于分布式环境下生成唯一 ID。 2014年开源 scala 语言版本。
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK