• 最近在逛别人博客偶然看到一个自己非常喜欢的样式所以尝试制作一下

参考样式

V2版本

修改文件

主题配置文件

  • 设置首页原始背景图为无_config.anzhiyu.yml
1
2
3
# The banner image of home page
index_img: "background: none"

HTML文件

  • 写入一个背景容器themes/anzhiyu/layout/includes/header/index.pug
1
2
3
4
5
6
7
8
    else if is_home() 
+     //- 首页背景
+     #naokuo-home_bg
+       #naokuo-home_img(style="background-image: url(https://cdn.cbd.int/naokuo-blog@1.1.1/img/2023-09-09022337.webp);")
        
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable

CSS文件

  • 写入背景样式themes/anzhiyu/source/css/_extra/naokuo/imgBG.css
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
/* 首页头图加载 */
body[data-type=anzhiyu] #nav,
body[data-type=anzhiyu] #scroll-down,
body[data-type=anzhiyu] #site-info {
  -webkit-animation: naokuo_scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards;
  animation: naokuo_scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards
}

@media screen and (max-width: 768px) {
  #naokuo-home_bg {
    position: relative !important
  }
}

@media screen and (min-width: 768px) {
  #naokuo-home_bg {
    will-change: opacity, transform, filter;
    opacity: calc(1 - var(--process) * 1) !important;
    -webkit-transform: scale(calc(1 + var(--process) * .1));
    -ms-transform: scale(calc(1 + var(--process) * .1));
    transform: scale(calc(1 + var(--process) * .1));
    -webkit-filter: blur(calc(var(--process) * 10px));
    filter: blur(calc(var(--process) * 10px));
    /* transition: all 0.1s; */
  }
}

#naokuo-home_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -4;
  overflow: hidden;
  display: none;
  animation: naokuo_blur-to-clear 2.5s cubic-bezier(.6, .25, .25, 1) 0s 1 backwards, naokuo_scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards;
  -webkit-animation: naokuo_blur-to-clear 2.5s cubic-bezier(.6, .25, .25, 1) 0s 1 backwards, naokuo_scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards
}

#naokuo-home_img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-image: url('https://cdn.cbd.int/naokuo-blog@1.1.1/img/2023-09-09022337.webp'); */
  opacity: 1;
  transition: opacity 1s;
  will-change: transform, opacity
}

@-webkit-keyframes naokuo_blur-to-clear {
  0% {
    -webkit-filter: blur(50px);
    filter: blur(50px)
  }

  100% {
    -webkit-filter: blur(0);
    filter: blur(0)
  }
}

@keyframes naokuo_blur-to-clear {
  0% {
    -webkit-filter: blur(50px);
    filter: blur(50px)
  }

  100% {
    -webkit-filter: blur(0);
    filter: blur(0)
  }
}

@-webkit-keyframes naokuo_scale {
  0% {
    -webkit-transform: scale(1.65);
    transform: scale(1.65);
    opacity: 0
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1
  }
}

@keyframes naokuo_scale {
  0% {
    -webkit-transform: scale(1.65);
    transform: scale(1.65);
    opacity: 0
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1
  }
}

#naokuo-home_bg video.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
}

#naokuo-home_bg video#TopVideo::-webkit-media-controls-enclosure{
  display: none !important  
}

JS文件

  • 控制背景样式themes/anzhiyu/source/js/utils.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
const NaoKuo = {
  /**
 * 背景滚动显现
 */
  BgScrollHide: () => {
    function scrollBg() {
      // 缓存常用dom元素
      const $plcontainer = document.getElementById('naokuo-home_bg'),
        currentTop = window.scrollY || document.documentElement.scrollTop,
        scrollPercent = anzhiyu.getScrollPercent(currentTop, document.body)
      if ($plcontainer) {
        let Plcontainer = scrollPercent / 50;
        if (Plcontainer > 1) {
          Plcontainer = 1;
        }
        // console.info(Plcontainer);  
        $plcontainer.style.cssText = '--process:' + Plcontainer + ';display:block;';
      }
    }
    scrollBg();
    anzhiyu.addEventListenerPjax(window, "scroll", scrollBg, { passive: true });
  },
  // 区间随机数
  getRandomInt: (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },
  // 随机壁纸
  setVideosBG: () => {
    if (!window.location.pathname.startsWith("/")) return;
    const $imgRandomInt = NaoKuo.getRandomInt(1, imgesArray.length) - 1,
      $videoRandomInt = NaoKuo.getRandomInt(1, videosArray.length) - 1,
      $VideosBGID = document.getElementById('naokuo-home_bg'),
      $ImgesBGID = document.getElementById('naokuo-home_img');
    //用于判断是否第一次加载,确保第一次加载的是图片以提升用户体验
    if (sessionStorage.getItem("isReload") && document.body.clientWidth > 768) {
      $VideosBGID && ($VideosBGID.innerHTML = `<video class="bg-video" id="TopVideo" width="100%" height="100%" preload="auto" autoplay="" loop="" muted="true" playsinline="" webkit-playsinline="" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint" x-webkit-airplay="allow">
    <source src="${videosArray[$videoRandomInt]}" type="video/mp4">
    </video>`);
    } else {
      //若为第一次加载
      sessionStorage.setItem("isReload", true)
      $ImgesBGID && ($ImgesBGID.style.cssText = `background-image: url(${imgesArray[$imgRandomInt]});`);
    }
  },
}
  • 引用themes/anzhiyu/source/js/main.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

//数组放在最上方

//视频背景数组
+ var videosArray = [
+   "https://media.w3.org/2010/05/sintel/trailer.mp4",
+   "https://media.w3.org/2010/05/sintel/trailer.mp4",
+   "https://media.w3.org/2010/05/sintel/trailer.mp4",
+   "https://media.w3.org/2010/05/sintel/trailer.mp4",
+   "https://media.w3.org/2010/05/sintel/trailer.mp4",
+   "https://media.w3.org/2010/05/sintel/trailer.mp4"
+ ];
+ //图片背景数组
+ var imgesArray = [
+   "https://cdn.cbd.int/naokuo-blog@1.2.0/img/2023-09-101438334.webp",
+   "https://cdn.cbd.int/naokuo-blog@1.2.0/img/2023-09-09022337.webp",
+   "https://cdn.cbd.int/naokuo-blog@1.2.0/img/2023-09-101438331.webp",
+   "https://cdn.cbd.int/naokuo-blog@1.2.0/img/2023-09-141827337.webp",
+   "https://cdn.cbd.int/naokuo-blog@1.2.0/img/13344348568275536.webp"
+ ];

//------------------------------------------

    anzhiyu.initIndexEssay();
    anzhiyu.changeTimeInEssay();
    anzhiyu.removeBodyPaceClass();
    anzhiyu.qrcodeCreate();
    anzhiyu.changeTimeInAlbumDetail();
    anzhiyu.reflashEssayWaterFall();
    anzhiyu.sayhi();
    anzhiyu.stopImgRightDrag();
    anzhiyu.addNavBackgroundInit();
    anzhiyu.setValueToBodyType();
    anzhiyu.catalogActive();
    anzhiyu.tagsPageActive();
    anzhiyu.categoriesBarActive();
    anzhiyu.topCategoriesBarScroll();
    anzhiyu.switchRightClickMenuHotReview();
    anzhiyu.getCustomPlayList();
    anzhiyu.addEventListenerConsoleMusicList(false);
    anzhiyu.initPaginationObserver();
    //上面是原有的
+   // 背景滑动显掩
+   NaoKuo.BgScrollHide();
+   // 随机背景
+   NaoKuo.setVideosBG();

推荐一些视频