Hexo添加雪花动态效果背景

发表于 更新于 分类于 阅读次数：
本文字数： 4.5k 阅读时长 ≈ 4 分钟
本文将介绍如何添加雪花动态效果背景

前言

偶然间看到名为Ln的博客界面，感觉这个雪花动效好美哦，之前也看过好多下雪效果，感觉个人唯独中意这款。

教程链接：https://weilining.cf/112.html

操作

操作过程很简单

首先在\themes\butterfly\source\js目录下新建一个snowflake.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
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  // 移动端不显示
}
else{
  document.write('<canvas id="snow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;pointer-events:none"></canvas>');

  window && (()=>{
    let e = {
        flakeCount: 50,
        minDist: 150,
        color: "255, 255, 255",
        size: 2,
        speed: .5,
        opacity: .2,
        stepsize: .5
    };
    const t = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(e) {
        window.setTimeout(e, 1e3 / 60)
    }
    ;
    window.requestAnimationFrame = t;
    const i = document.getElementById("snow"), 
    n = i.getContext("2d"), 
    o = e.flakeCount;
    let a = -100, 
    d = -100, 
    s = [];
    i.width = window.innerWidth,
    i.height = window.innerHeight;
    const h = ()=>{
        n.clearRect(0, 0, i.width, i.height);
        const r = e.minDist;
        for (let t = 0; t < o; t++) {
            let o = s[t];
            const h = a, 
            w = d, 
            m = o.x, 
            c = o.y, 
            p = Math.sqrt((h - m) * (h - m) + (w - c) * (w - c));
            if (p < r) {
                const e = (h - m) / p, 
                t = (w - c) / p, 
                i = r / (p * p) / 2;
                o.velX -= i * e,
                o.velY -= i * t
            } else
                o.velX *= .98,
                o.velY < o.speed && o.speed - o.velY > .01 && (o.velY += .01 * (o.speed - o.velY)),
                o.velX += Math.cos(o.step += .05) * o.stepSize;
            n.fillStyle = "rgba(" + e.color + ", " + o.opacity + ")",
            o.y += o.velY,
            o.x += o.velX,
            (o.y >= i.height || o.y <= 0) && l(o),
            (o.x >= i.width || o.x <= 0) && l(o),
            n.beginPath(),
            n.arc(o.x, o.y, o.size, 0, 2 * Math.PI),
            n.fill()
        }
        t(h)
    }
      , l = e=>{
        e.x = Math.floor(Math.random() * i.width),
        e.y = 0,
        e.size = 3 * Math.random() + 2,
        e.speed = 1 * Math.random() + .5,
        e.velY = e.speed,
        e.velX = 0,
        e.opacity = .5 * Math.random() + .3
    }
    ;
    document.addEventListener("mousemove", (e=>{
        a = e.clientX,
        d = e.clientY
    }
    )),
    window.addEventListener("resize", (()=>{
        i.width = window.innerWidth,
        i.height = window.innerHeight
    }
    )),
    (()=>{
        for (let t = 0; t < o; t++) {
            const t = Math.floor(Math.random() * i.width)
              , n = Math.floor(Math.random() * i.height)
              , o = 3 * Math.random() + e.size
              , a = 1 * Math.random() + e.speed
              , d = .5 * Math.random() + e.opacity;
            s.push({
                speed: a,
                velX: 0,
                velY: a,
                x: t,
                y: n,
                size: o,
                stepSize: Math.random() / 30 * e.stepsize,
                step: 0,
                angle: 180,
                opacity: d
            })
        }
        h()
    }
    )()
  }
  )();
}

注：设置移动端不显示

找到主题配置文件_config.butterfly.yml，在inject的bottom引入该js文件:

1
2
3
4
inject:
  head:
  bottom:
    - <script src="/js/snowflake.js"></script>

重新部署，启动就可以看见啦。

其他下雪动效

顺便把之前找到过的一款下雪动效的操作方法也写出来，喜欢的可以拿去

六边形雪片

操作过程也很简单，在\themes\butterfly\source\js目录下新建一个snow.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
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
    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  /* 定义密集程度，数字越小越密集 */
    });
});

然后将该js文件引入主题配置文件_config.butterfly.yml，同样在在inject的bottom处：

1
2
3
4
inject:
  head:
  bottom:
	- <script src="/js/snow.js"></script> # 下雪动效

重新部署，启动，就可以看到效果啦。

结尾

把之前无比喜爱的樱花🌸动效换掉了，也许碰到更好看的就把这个也换掉啦。

相关文章