• 欢迎访问db1024网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏db1024吧

给WordPress、Emlog等博客网站添加下雪特效,附带Typecho下雪插件

网络资源 Liam 1年前 (2019-04-28) 324次浏览 0个评论 扫描二维码
文章目录[隐藏]

前言

又到了白色相簿的季节,给博客页面加上雪花效果是再好不过的了。

截图

给WordPress、Emlog等博客网站添加下雪特效,附带Typecho下雪插件

介绍

  • 让页面开始下雪吧
  • 较低的CPU消耗,移动端效果良好
  • 原生JavaScript实现,不依赖其他类库
  • 丰富的自定义项,可自定义多种选项

Typecho插件

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

如果你用的是Typecho,那么只需在Github下载插件并启用即可,WordPressEmlog等博客教程请接着往下看!

通用教程

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、添加样式Style
背景颜色可根据自身需要改变

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

文章来源:听说冬天和雪花更配哦


db1024 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:给WordPress、Emlog等博客网站添加下雪特效,附带Typecho下雪插件
喜欢 (0)
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址