Hexo设置少量固定的动态背景图

文章目录

前言
先准备素材
问题分析
代码实现
前言
先准备素材
问题分析
代码实现

前言

在以前的这篇文章中，我们设置了一些动态背景。

这次我们加一丁点优化，为下一次做准备。

先准备素材

还是老样子，准备四张照片，然后压缩。这是我找到的四张照片：

Hexo设置少量固定的动态背景图-LMLPHP

当然，这些都是通过iloveImg压缩掉了，每张图片大概 500 K B 500KB 500KB到 800 K B 800KB 800KB不等。

用这些图片我们先做一个有限的轮播效果。

问题分析

我们现在先选用 4 4 4个div元素进行基本的轮播实现。

具体而言，轮播又要如何做呢？

之前我们已经提到，单纯使用body的background属性设置遮罩与背景图片已经不足够了。最大的问题就是linear-gradient在关键帧之间没有渐变的过程。

所以我们最后还是返璞归真，使用培训班经常教的拉图像框的形式。

简单描述的话，就是有一个占满整个屏幕的div作为可视框图。为了方便描述，我们将他记为carousel-frame。carousel-frame的长度宽度都是浏览器的 100 % 100\% 100%，并且位置是固定在浏览器中的，并不随着滚轮的移动而移动。

然后呢，我们用上一个长度超出carousel-frame 4 4 4倍的div，叫做carousel-banner。carousel-banner在carousel-frame的里面，或者并行也可以。因为carousel-frame已经占满了一整个屏幕，剩下的内容其实看不见的。

正因为carousel-banner一共超出了 4 4 4倍，所以可以放下 4 4 4张浏览器可视页面大小的图片作为我们当前显示的背景图。

我们通过控制carousel-banner的左边界位置来控制当前图片显示。

这种思想其实很多地方都能够看到，因为这样的话就只需要加载一张图片，然后所有需要图片的元素访问这个图片的一个部分就可以了。

最后呢，为了让背景图片看起来不那么像广告那种轮播图一样单调，我们还是把控制左边界的过程省略掉，通过不透明度的设置屏蔽掉。这样就好了。

那么CSS大概又如何设计动画呢？

我们就简单用流程图展示一下：

代码实现

好了，废话也说了这么多了，也该show me the code了。

为了保证绝对的速度，我们直接使用原生JavaScript创建这些内容。一方面是使得在readyState为loading的时候就直接加载所有内容，另一方面也是因为CSS与JS两种文件的加载都会稍有误差，在网速较快的时候表现并不明显，但是图片较大或者网速较慢都会产生很尴尬的时间错位，然后图片就会闪回。这可是很难看的。

逻辑写在哪

我们在source/js/utils.js文件中，找到这么一段：

  if (document.readyState === 'loading') {
    document.addEventListener('readystatechange', onPageLoaded, { once: true });
  } else {
    onPageLoaded();
  }

我们来添加一个函数，变成这样：

  if (document.readyState === 'loading') {
    document.addEventListener('readystatechange', onPageLoaded, { once: true });
    addBackgroundImageDiv();
  } else {
    onPageLoaded();
  }

这个函数的具体定义就可以直接写在下面：

function addBackgroundImageDiv () { }

当然，你会注意到下面还有一个定义：

NexT.utils = {
    ...
}

如果写在里面，所有的函数将无法识别。并不清楚其中的缘由。

总之，放在utils.js中的话，就不需要在模板文件中引入script标签了，也不用在意打包之后的路径该怎么办了。

先搭建基本框架

对于我们的思路呢，我们就一步步开始实现。我们先创建DOM元素：

// create dom element for background images
// ----------------------------------------
const opacityMask = document.createElement("div");
opacityMask.style.background = "linear-gradient(#fff, #ffced9, #fff)";
opacityMask.style.position = "fixed";
opacityMask.style.top = "0";
opacityMask.style.left = "0";
opacityMask.style.content = "";
opacityMask.style.width = "100%";
opacityMask.style.height = "100%";
opacityMask.style.opacity = "0.8";
opacityMask.style.zIndex = "-1";
const imageContainer = document.createElement("div");
imageContainer.style.position = "fixed";
imageContainer.style.top = "0";
imageContainer.style.left = "0";
imageContainer.style.content = "";
imageContainer.style.width = "100%";
imageContainer.style.height = "100%";
imageContainer.style.zIndex = "-2";
const imageScroller = document.createElement("div");
imageScroller.id = "image-scroller";
imageScroller.style.position = "fixed";
imageScroller.style.top = "0";
imageScroller.style.left = "0";
imageScroller.style.content = "";
imageScroller.style.width = "400%";
imageScroller.style.height = "100%";
imageScroller.style.display = "flex";
imageContainer.style.justifyContent = "space-around";
imageContainer.style.alignContent = "center";
imageContainer.style.alignItems = "center";
imageScroller.style.zIndex = "-3";
document.body.appendChild(opacityMask);
document.body.appendChild(imageContainer);
document.body.appendChild(imageScroller);
// well done! basic frames established!

当然，你也一定能找到更简单的写法。我这一步步操作过来只是单纯为了逻辑清晰。

然后添加图片链接

然后，我们再将图片放进去：

// url for background images
// -------------------------
const BASE_URL = 'http://images.sakebow.cn/bgimage/'
const DEVICES = ['pc']
const imgWindowUrl = { 'pc': [
  '/race-miku.jpg', '/masuri-miku.jpg', '/planet-miku.jpg', '/4mikus.jpg'
] };
for (const imgUrlItem of imgWindowUrl['pc']) {
  const imageFrameItemContainer = document.createElement("div");
  imageFrameItemContainer.style.width = imageContainer.style.width;
  imageFrameItemContainer.style.height = "100%";
  imageFrameItemContainer.innerHTML = "<img" +
    " src='" + BASE_URL + DEVICES[0] + imgUrlItem + "'" +
    " style='width: 100%; height: 100%;'" +
    " alt='network broken?' />";
  imageScroller.appendChild(imageFrameItemContainer);
}
// well done! all images ready!

在这里你能看到我的一些没必要的设计，这些其实是我为了以后做拓展用的。当然也不一定会做就是了。（诶嘿~⭐）

动画效果

在搭建了框架、设置了图片链接后，我们就可以准备开始轮播的操作了。

当然，你可能会想到再去style.styl文件中写一些css。但很可惜的是，别忘了，我们可是在loading状态下，所有的内容都是不可用的。

于是，就连动画效果我们也要创建style标签并编辑动画效果：

// keyframe to roll images
// -------------------------------
// create style element
const imageRollStyle = document.createElement('style');
// set animation time for all
const EPOCH_TIME = "64s ";
// set animation style for all
const ANIMATION_DEFAULT_SETTINGS = "linear infinite both running ";
// set keyframes into style element
imageRollStyle.innerHTML = `@keyframes image-roll {
  0%  { left: 0; } 24% { left: 0; } 25% { left: -100%; } 49% { left: -100%; } 50% { left: -200%; }
  74% { left: -200%; } 75% { left: -300%; } 99% { left: -300%; } 100%{ left: 0; }
}@keyframes image-translate-child-1 {
  0%  { scale: 1; opacity: 0 } 2% { scale: 1; opacity: 1; } 23% { scale: 1.1; } 25%, 100% { scale: 1.1; opacity: 0; }
}
#image-scroller>div:nth-child(1) {
  animation: ${EPOCH_TIME + ANIMATION_DEFAULT_SETTINGS} image-translate-child-1;
}@keyframes image-translate-child-2 {
  0%, 25%  { scale: 1; opacity: 0 } 27% { scale: 1; opacity: 1; } 48% { scale: 1.1; } 50%, 100% { scale: 1.1; opacity: 0; }
}
#image-scroller>div:nth-child(2) {
  animation: ${EPOCH_TIME + ANIMATION_DEFAULT_SETTINGS} image-translate-child-2;
}@keyframes image-translate-child-3 {
  0%, 50%  { scale: 1; opacity: 0 } 52% { scale: 1; opacity: 1; } 73% { scale: 1.1; } 75%, 100% { scale: 1.1; opacity: 0; }
}
#image-scroller>div:nth-child(3) {
  animation: ${EPOCH_TIME + ANIMATION_DEFAULT_SETTINGS} image-translate-child-3;
}@keyframes image-translate-child-4 {
  0%, 75%  { scale: 1; opacity: 0 } 77% { scale: 1; opacity: 1; } 98% { scale: 1.1; } 100% { scale: 1.1; opacity: 0; }
}
#image-scroller>div:nth-child(4) {
  animation: ${EPOCH_TIME + ANIMATION_DEFAULT_SETTINGS} image-translate-child-4;
}`;
// well done! now images can be rolling with fadeIn and fadeOut style, as well as scale 1.1x slowly

如果需要稳妥的话，也需要在keyframes的基础上额外增加一些适配，比如-moz-keyframes、-webkit-keyframes等等诸如此类的玩意儿。

在这里就不多说了，如果加上的话这个教程就没完没了了。

最后，我们让style标签加入页面中去：

// 将style样式存放到head标签
// ----------------------
document.getElementsByTagName('head')[0].appendChild(imageRollStyle);
imageScroller.style.animation = `${EPOCH_TIME + ANIMATION_DEFAULT_SETTINGS} image-roll`;
// well done! keyframes in effect!

看起来一切都可行了！

不出意外的话，这些就够出现效果了。—
title: Hexo设置少量固定的动态背景图
date: 2023-12-25 09:07:10
categories:

customize
tags:
customize
css
mathjax: true

前言

在以前的这篇文章中，我们探讨了如何在body上设置静态背景。

由于动态背景的示意图制作成本稍高，暂时以文字描述替代。后续将根据实际情况安排动态示意图的展示。