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

文章目录

  • 前言
  • 先准备素材
  • 问题分析
  • 代码实现
    • 逻辑写在哪
    • 先搭建基本框架
    • 然后添加图片链接
    • 动画效果
  • 前言
  • 先准备素材
  • 问题分析
  • 代码实现
    • 逻辑写在哪
    • 先搭建基本框架
    • 然后添加图片链接
    • 动画效果

前言

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

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

先准备素材

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

Hexo设置少量固定的动态背景图_第1张图片

Hexo设置少量固定的动态背景图_第2张图片

Hexo设置少量固定的动态背景图_第3张图片

Hexo设置少量固定的动态背景图_第4张图片

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

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

问题分析

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

为什么是 4 4 4个呢?

如果是 2 2 2个轮播的话,容错很低,如果有一个较大的图片,加载可能会出现闪回。这个在Hexo设置背景图片轮播效果已经得到了证实。

如果是 3 3 3个轮播的话,很难计算。因为有很多3无法整除的情况,可能会出现因为时间精确度不够产生的闪回。

4 4 4个的话,目前而言容错稍高。当然我并没有测试出极端情况,只是比较稳妥的是 4 4 4张轮播。

具体而言,轮播又要如何做呢?

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

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

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

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

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

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

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

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

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

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

25%
25%
25%
25%
第一张图片
第二张图片
第三张图片
第四张图片

代码实现

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

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

逻辑写在哪

我们在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 = " +
    " 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上设置静态背景。

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

先准备素材

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

Hexo设置少量固定的动态背景图_第5张图片

Hexo设置少量固定的动态背景图_第6张图片

Hexo设置少量固定的动态背景图_第7张图片

Hexo设置少量固定的动态背景图_第8张图片

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

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

问题分析

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

为什么是 4 4 4个呢?

如果是 2 2 2个轮播的话,容错很低,如果有一个较大的图片,加载可能会出现闪回。这个在Hexo设置背景图片轮播效果已经得到了证实。

如果是 3 3 3个轮播的话,很难计算。因为有很多3无法整除的情况,可能会出现因为时间精确度不够产生的闪回。

4 4 4个的话,目前而言容错稍高。当然我并没有测试出极端情况,只是比较稳妥的是 4 4 4张轮播。

具体而言,轮播又要如何做呢?

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

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

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

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

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

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

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

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

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

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

25%
25%
25%
25%
第一张图片
第二张图片
第三张图片
第四张图片

代码实现

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

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

逻辑写在哪

我们在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 = " +
    " 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!

看起来一切都可行了!

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

你可能感兴趣的:(Hexo,hexo,css,javascript)