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

用户576905308012024-03-27 13:51

前言

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

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

先准备素材

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

当然，这些都是通过iloveImg压缩掉了，每张图片大概 <math xmlns="http://www.w3.org/1998/Math/MathML"> 500 K B 500KB </math>500KB到 <math xmlns="http://www.w3.org/1998/Math/MathML"> 800 K B 800KB </math>800KB不等。

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

问题分析

我们现在先选用 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4个div元素进行基本的轮播实现。

为什么是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4个呢？

如果是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 2 2 </math>2个轮播的话，容错很低，如果有一个较大的图片，加载可能会出现闪回。这个在Hexo设置背景图片轮播效果已经得到了证实。

如果是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 3 3 </math>3个轮播的话，很难计算。因为有很多3无法整除的情况，可能会出现因为时间精确度不够产生的闪回。

<math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4个的话，目前而言容错稍高。当然我并没有测试出极端情况，只是比较稳妥的是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4张轮播。

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

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

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

简单描述的话，就是有一个占满整个屏幕的div作为可视框图。为了方便描述，我们将他记为carousel-frame。carousel-frame的长度宽度都是浏览器的 <math xmlns="http://www.w3.org/1998/Math/MathML"> 100 % 100\% </math>100%，并且位置是固定在浏览器中的，并不随着滚轮的移动而移动。

然后呢，我们用上一个长度超出carousel-frame <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4倍的div，叫做carousel-banner。carousel-banner在carousel-frame的里面，或者并行也可以。因为carousel-frame已经占满了一整个屏幕，剩下的内容其实看不见的。

正因为carousel-banner一共超出了 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4倍，所以可以放下 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4张浏览器可视页面大小的图片作为我们当前显示的背景图。

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

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

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

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

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

graph LR A[第一张图片]--25%-->B[第二张图片]--25%-->C[第三张图片]--25%-->D[第四张图片]--25%-->A

代码实现

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

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

逻辑写在哪

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

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

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

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

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

javascript 复制代码 
function addBackgroundImageDiv () { }

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

javascript 复制代码 
NexT.utils = {
    ...
}

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

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

先搭建基本框架

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

javascript 复制代码 
// 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!

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

然后添加图片链接

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

javascript 复制代码 
// 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标签并编辑动画效果：

javascript 复制代码 
// 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标签加入页面中去：

javascript 复制代码 
// 将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上设置静态背景。

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

先准备素材

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

当然，这些都是通过iloveImg压缩掉了，每张图片大概 <math xmlns="http://www.w3.org/1998/Math/MathML"> 500 K B 500KB </math>500KB到 <math xmlns="http://www.w3.org/1998/Math/MathML"> 800 K B 800KB </math>800KB不等。

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

问题分析

我们现在先选用 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4个div元素进行基本的轮播实现。

为什么是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4个呢？

如果是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 2 2 </math>2个轮播的话，容错很低，如果有一个较大的图片，加载可能会出现闪回。这个在Hexo设置背景图片轮播效果已经得到了证实。

如果是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 3 3 </math>3个轮播的话，很难计算。因为有很多3无法整除的情况，可能会出现因为时间精确度不够产生的闪回。

<math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4个的话，目前而言容错稍高。当然我并没有测试出极端情况，只是比较稳妥的是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4张轮播。

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

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

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

简单描述的话，就是有一个占满整个屏幕的div作为可视框图。为了方便描述，我们将他记为carousel-frame。carousel-frame的长度宽度都是浏览器的 <math xmlns="http://www.w3.org/1998/Math/MathML"> 100 % 100\% </math>100%，并且位置是固定在浏览器中的，并不随着滚轮的移动而移动。

然后呢，我们用上一个长度超出carousel-frame <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4倍的div，叫做carousel-banner。carousel-banner在carousel-frame的里面，或者并行也可以。因为carousel-frame已经占满了一整个屏幕，剩下的内容其实看不见的。

正因为carousel-banner一共超出了 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4倍，所以可以放下 <math xmlns="http://www.w3.org/1998/Math/MathML"> 4 4 </math>4张浏览器可视页面大小的图片作为我们当前显示的背景图。

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

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

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

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

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

graph LR A[第一张图片]--25%-->B[第二张图片]--25%-->C[第三张图片]--25%-->D[第四张图片]--25%-->A

代码实现

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

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

逻辑写在哪

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

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

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

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

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

javascript 复制代码 
function addBackgroundImageDiv () { }

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

javascript 复制代码 
NexT.utils = {
    ...
}

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

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

先搭建基本框架

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

javascript 复制代码 
// 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!

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

然后添加图片链接

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

javascript 复制代码 
// 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标签并编辑动画效果：

javascript 复制代码 
// 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标签加入页面中去：

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

看起来一切都可行了！

不出意外的话，这些就够出现效果了。

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由（更新中）
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1：npm简介
前端·npm·node.js
小白白一枚1117 小时前
css实现div被图片撑开
前端·css
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play