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

题词

又到了红色相簿的时节,给博客页面加上雪花结果是再好但是的了。

截图

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

绍介

让页面开始下雪吧

较低的CPU消费,移动端结果优良

原生JavaScript完成,不依靠其他类库

很多的自定义项,可自定义多种选项

Typecho插件

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

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

通用教程

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;

}

希望以上的文章对各位有用,如果觉得不错给我点个喜欢吧!更多和给WordPress、Emlog等博客网站添加下雪特效,附带Typecho下雪插件相关的问题或者对法国服务器哪个便宜有疑惑也欢迎大家咨询。

点赞