0%

添加雪花飘落背景效果

该文章以hexo+next为例,介绍添加雪花飘落背景效果步骤(hexo下的其它的主题大同小异)

  1. 在\blog\themes\next\source\js目录下新建snow2.js文件,添加如下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    /*样式一*/
    (function ($) {
    $.fn.snow = function (options) {
    var $flake = $('<div id="snowbox" />').css({
    'position': 'absolute',
    'z-index': '9999',
    'top': '-50px'
    }).html('❄'),
    documentHeight = $(document).height(),
    documentWidth = $(document).width(),
    defaults = {
    minSize: 10,
    maxSize: 20,
    newOn: 1000,
    flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
    },
    options = $.extend({}, defaults, options);
    var interval = setInterval(function () {
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
    left: startPositionLeft,
    opacity: startOpacity,
    'font-size': sizeFlake,
    color: options.flakeColor
    }).animate({
    top: endPositionTop,
    left: endPositionLeft,
    opacity: 0.2
    }, durationFall, 'linear', function () {
    $(this).remove()
    });
    }, options.newOn);
    };
    })(jQuery);
    $(function () {
    $.fn.snow({
    minSize: 5,
    /* 定义雪花最小尺寸 */
    maxSize: 50,
    /* 定义雪花最大尺寸 */
    newOn: 300 /* 定义密集程度,数字越小越密集 */
    });
    });
  2. 在\blog\themes\next\layout\_layout.swig中添加如下代码(文件最后添加即可)

    1
    2
    <!-- 雪花特效2 -->
    <script type="text/javascript" src="/js/snow2.js"></script>
  3. 在\blog\themes\next\_config.yml下添加如下代码(文件最后添加即可)

    1
    2
    3
    # 雪花特效2
    snow2:
    enabled: true
  4. 如果你已经引入jQuery,请忽略这一步

    在第3步中,\blog\themes\next\layout\_layout.swig文件中已经引入了snow2.js,需要在这之前引入jQuery,添加代码如下:

    1
    2
    <!-- 引入jQuery -->
    <script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

    ps:引入jQuery的代码要在引入snow2.js之前添加

  5. 如果想要无齿轮的雪花效果,将snow2.js中的代码替换为下面的代码即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    /*样式二*/
    /* 控制下雪 */
    function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200; /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function (callback) {
    setTimeout(callback, 1000 / 60);
    };

    cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function () {
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function () {
    snowcanvas.width = window.innerWidth;
    /* snowcanvas.height = window.innerHeight */
    }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
    this.size = Math.random() * flakeSize + 2; /* 形状 */
    this.maxSize = flakeSize; /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
    this.fallSpeed = fallSpeed; /* 坠落速度 */
    this.velY = this.speed; /* Y方向速度 */
    this.velX = 0; /* X方向速度 */
    this.stepSize = Math.random() / 30; /* 步长 */
    this.step = 0 /* 步数 */
    }
    flakeMove.prototype.update = function () {
    var x = this.x,
    y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
    this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
    this.reset(canvas.width, canvas.height)
    }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function (width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
    };
    // 渲染雪花-随机形状(此处可修改雪花颜色!!!)
    flakeMove.prototype.render = function (ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色,默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色,请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
    var maxFlake = this.maxFlake,
    flakes = this.flakes = [],
    canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
    flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
    }
    /* 画雪 */
    function drawSnow() {
    var maxFlake = this.maxFlake,
    flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
    flakes[e].update();
    flakes[e].render(ctx);
    }
    /* 一帧一帧的画 */
    this.loop = requestAnimationFrame(function () {
    drawSnow.apply(that);
    });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({
    maxFlake: 60
    });
    snow.start();

参考链接:https://www.yansheng.xyz/article/cf9c6a5e.html