cnfox

简单的,有丰富自定义项的 typecho 页面下雪插件
前言​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌...
扫描右侧二维码阅读全文
03
2019/08

简单的,有丰富自定义项的 typecho 页面下雪插件

前言

​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌​‌​‍​‌​​‌​​​‌​​​‌‌​‍​‌​‌‌​​​‌‌​​​​​‍​​‌​‌‌‌‌‌‌‌‌​​​‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​‌‌​​​‌‌‌​​​‌​‌‍​​‌‌‌‌‌‌‌‌​​‌‌‍​‌​‌​‌‌‌‌​‌​​‌‌‍​‌‌‌​‌​​​​​​‌​‌‌‍​‌​‌‌‌​​‌​‌​​‌‌‍​‌​​‌‌​‌‌​‌​‌‌​‍​‌​‌​‌‌​‌‌‌​​‌‌‍​‌‌​‌​​‌​​​‌​‌​‌‍​‌‌‌‌‌​‌​‌​​‌‌‌​‍​​‌‌​​‌​​​​‌​‌‌‍​‌‌​‌‌‌​‌​‌‌​​‌​‍​‌​‌​‌‌​​​‌‌​​‌‍​​‌‌‌‌‌‌‌‌​​‌​‍​​​​​​​​‌‌‌‌​​‌‌‍​​​‌​‌​‌‌​​‌‌‌​‍‌​​‌​‌​‌‍‌​​‌​​​​‍‌​​​‌​‌​‍‌​​​‌‌​‌‍‌​​‌​​​‌‍‌​​‌‌​‌​‍‌​​​​‌‌​‍‌‌​‌​​​‌‍‌​​‌‌‌‌​‍‌​​‌‌​‌‌‍​‌‌​​​‌​‌‌‌​​​‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍‌‌​​‌‌‌​‍‌‌​​‌​​​‍‌‌​‌​​‌​‍‌‌​​‌‌‌​‍‌‌​​‌‌​‌‍‌‌​‌​​‌​‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍​‌​‌‌​‌‌‌‌​​‌​​‍​‌‌​​​​‌​‌​​​‌‌‍​​​​​​​​‌‌‌‌​​‌‌‍​‌​‌‌​​​‌‌​​​​​‍​​‌‌​‌​​‌‌‌‌​​​‍​‌​‌​​​‌‌​​‌‌‌‌‍​‌​‌​​​‌​‌‌‌‌‌‌‍​​​​​​​​‌‌‌​​‌​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​​‌​‌‌‍‌​​​‌‌‌‌‍‌​​​‌‌​​‍‌‌​​​‌​‌‍‌​‌​​​‌‌‍‌​‌​​​‌‌‍‌​​‌​‌‌​‍‌​​‌​​‌​‍‌​​‌​‌​‌‍‌​​‌‌‌‌​‍‌​​‌‌​‌‌‍‌‌​‌​​​‌‍‌​​‌‌‌​​‍‌​​‌​​​‌‍‌​‌​​​‌‌‍‌​​‌‌‌‌​‍‌​​​‌‌​‌‍‌​​‌‌‌​​‍‌​​‌​‌‌‌‍‌​​‌​‌‌​‍‌​​​‌​​‌‍‌​​‌‌​‌​‍‌​​​‌‌​​‍‌​‌​​​‌‌‍‌​​‌‌‌​​‍‌​​‌​​​​‍‌​​‌‌​‌‌‍‌​​‌‌​‌​‍‌​‌​​​‌‌‍‌​​​‌‌​​‍‌​​‌​​​​‍‌​​​‌​‌​‍‌​​‌​​​‌‍‌​​‌‌​‌‌‍‌​​​‌‌​​‍‌‌​‌​​‌​‍‌​​​‌​​​‍‌​​‌‌​‍‌​​‌​​​‌‍‌​​​‌​‌‌‍‌​​‌‌​‌​‍‌​​​‌‌​‌‍‌‌​‌​​‌​‍‌​​‌‌‌‌​‍‌​​‌​​​‌‍‌​​‌‌​‌‌‍‌‌​‌​​‌​‍‌​​​‌‌​​‍‌​​‌​​​‌‍‌​​‌​​​​‍‌​​​‌​​​‍‌​​‌‌​​‌‍‌​​‌​​‌‌‍‌​​‌‌‌‌​‍‌​​‌​‌​​‍‌​​‌‌​‌​‍‌​​​‌‌​​‍‌‌​‌​​‌​‍‌​​‌‌‌‌​‍‌​​​‌‌​‌‍‌​​‌‌​‌​‍‌‌​‌​​‌​‍‌​​‌​​‌​‍‌​​‌​​​​‍‌​​​‌‌​‌‍‌​​‌‌​‌​‍‌‌​‌​​‌​‍‌​​‌‌‌​​‍‌​​‌​​​​‍‌​​‌​​‌​‍‌​​​‌‌‌‌‍‌​​‌‌‌‌​‍‌​​​‌​‌‌‍‌​​‌​‌‌​‍‌​​‌‌‌​‌‍‌​​‌​​‌‌‍‌​​‌‌​‌​
 又到了白色相簿热的要死的季节,给博客加上雪花效果是再好不过的了。
 两年前差不多这个时候我使用过一个插件,可以实现雪花效果。但那个插件基于3JS和jQuery,且CPU消耗过大。
 经过寻找后,我找到了一个较为满意且简单,有丰富自定义项的 typecho 页面下雪插件。
 最终效果见本站即可 (默认设置的最后一项背景颜色,默认是有点暗的颜色,作者备注建议不要填空,但是我感觉填空会更好看些.雪花默认参数的电脑效果是挺好看的 ,但是手机端效果雪花稍微有点多,希望作者可以将PC端和移动端的设置分开) ❀(๑╯◡╰๑)❀
 相比两年前的版本,这次的插件有如下特点:

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

Typecho插件

 如果你用的是Typecho,那么只需在Github下载插件-Download ZIP, 解压,将 Snow-Typecho-Plugin-master 重命名为 Snow ,之后上传到你博客中的 /usr/plugins 目录,在后台启用插件稍作设置即可。
 我这里也贴一个亲测可用的版本,文件名改过了,直接解压到/usr/plugins 目录就好惹,评论后可见哦 ヽ(*。>Д<)o゜

此处内容需要评论回复后(审核通过)方可阅读。

//这是我插件的设置参数 可以参考一下 背景颜色为空
移动端是否加载
否

雪花数量
150

雪花大小
1.5

雪花距离
200

雪花速度
0.3

雪花横移
1

雪花颜色
#ffffff

雪花透明度
0.3

背景颜色


通用教程请接着往下看

通用教程

创建画布
在方便的位置加入以下内容

<canvas id="Snow"></canvas>

引入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();
})();

添加样式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;
}

Last modification:November 2nd, 2019 at 04:19 pm
如果觉得我的文章对你有用,请随意赞赏

12 comments

  1. 银麟 Google Chrome 77.0.3865.90 Windows 10 中国 北京 北京

    谢谢分享~

    1. cnfox Google Chrome 78.0.3904.17 Windows 10 中国 北京 北京
      @银麟

      哈哈哈哈不阔气 常来看看~

  2. 七月 QQ浏览器 9.8.1 iPhone 11.0.3 中国 江苏 南京

    OωO

    1. cnfox Google Chrome 78.0.3904.17 Windows 10 中国 北京 北京
      @七月

      (/ω\)

  3. 喵了个咪 Google Chrome 78.0.3904.70 Windows 10 中国 江苏 无锡

    现在真的到了白色相簿的集结了哟

    1. cnfox Google Chrome 78.0.3904.17 Windows 10 中国 北京 北京
      @喵了个咪

      |´・ω・)ノ 最喜欢下雪天了

  4. zhou Google Chrome 78.0.3904.70 Windows 10 中国 广东 佛山

    牛逼 牛逼 前来取雪୧(๑•̀⌄•́๑)૭

    1. cnfox Google Chrome 78.0.3904.17 Windows 10 中国 北京 北京
      @zhou

      |´・ω・)ノ 常来常来

  5. pq8o3q Google Chrome 78.0.3904.70 Mac OSX 10.13.6 美国 美国

    感谢分享

    1. cnfox Google Chrome 78.0.3904.17 Windows 10 中国 北京 北京
      @pq8o3q

      常来常来~~

  6. Dxoca Firefox 68.0 Windows 10 中国 青海 海南藏族自治州

    学长 已经用上啦~

    1. cnfox Google Chrome 74.0.3729.169 Windows 7 中国 北京 北京
      @Dxoca

      ୧(๑•̀⌄•́๑)૭ 夏天解暑 ,手机上效果差点 其他还是蛮漂亮的 也不会觉得花里胡哨

Leave a Comment