zblog博客首页雪花特效如何设置? 今天我来教大家

今天看到一些博客有飘雪特效,于是我就参考了下顺便分享出来

雪花特效以Zblog为例,其他程序自测

首先找到主题模板根目录下的底部文件footer.php 在适当位置加入以下代码

ps:如果你使用的是宁静致远主题模板可以在后台→主题配置→广告设置把以下代码复制粘贴进去即可

下一步到主机根目录创建个js文件,并命名为xue.js如图:1612084403-1612084390211.png插图

创建好了复制以下代码进去xue.js文件里面

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, //雪花数量,数值越大雪花数量越多,建议不要超过500

        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) + 3; //加号后面的值,雪花大小,为基准值,数值越大雪花越大

        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) + 3, //加号后面的值,雪花大小,为基准值,数值越大雪花越大

                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代码,复制以下css代码到模板全局css文件里也可以放到footer.php里面,或其他主题设置自定义css

css代码

.snow {

    display: block;}#snow {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 9999;

    pointer-events: none;}

 

然后在后台首页清除缓存,刷新网页即可

© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论