粘性加载动画

参考文章

新建 [Blogroot]/themes/butterfly/layout/includes/loading/load_style/gooey.pug
1
2
3
4
#loading-box
div.centered
div.blob-1
div.blob-2

新建 [Blogroot]/themes/butterfly/source/css/_load_style/gooey.styl

#loading-box {
    background: #000;
    position: fixed;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    text-align: center;

    &.loaded {
        z-index: -1000;
    }

    .centered {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #000;
        filter: blur(10px) contrast(20);

        .blob-1, .blob-2 {
            width: 70px;
            height: 70px;
            position: absolute;
            background: #fff;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .blob-1 {
            left: 20%;
            animation: osc-l 2.5s ease infinite;
        }

        .blob-2 {
            left: 80%;
            animation: osc-r 2.5s ease infinite;
            background: #0ff;
        }
    }
}

/* Animations */
@keyframes osc-l {
    0% {
        left: 20%;
    }

    50% {
        left: 50%;
    }

    100% {
        left: 20%;
    }
}

@keyframes osc-r {
    0% {
        left: 80%;
    }

    50% {
        left: 50%;
    }

    100% {
        left: 80%;
    }
}

修改[Blogroot]/themes/butterfly/layout/includes/loading/loading.pug

if theme.preloader.enable
  case theme.preloader.load_style    
    when 'gooey'
      include ./load_style/gooey.pug
    default
      include ./load_style/default.pug

修改[Blogroot]/themes/butterfly/source/css/_layout/loading.styl，复制以下代码替换全部内容

if hexo-config('preloader.enable')
  if hexo-config('preloader.load_style') == 'gooey'
    @import './_load_style/gooey'
  else if hexo-config('preloader.load_style') == 'image'
    @import './_load_style/image'
  else
    @import './_load_style/default'

修改[Blogroot]/themes/butterfly/layout/includes/layout.pug

butterfly_v3.6.0+
1
2
3
4
body
- if theme.preloader
+ if theme.preloader.enable
!=partial('includes/loading/loading', {}, {cache: true})
butterfly_v3.0.0-v3.5.1 需要将 {cache: true} 换成 {cache:theme.fragment_cache}。

修改[Blogroot]/themes/butterfly/source/css/var.styl，添加自定义修改背景色的配置项

      // preloader
-     $preloader-bg = #37474f
+     $preloader-bg = hexo-config('preloader.enable') && hexo-config('preloader.load_color') ? convert(hexo-config('preloader.load_color')) : #37474f
      $preloader-word-color = #fff

修改主题配置文件的preloader配置项

    # Loading Animation (加載動畫)
-   preloader: true
+   preloader:
+     enable: true # true|false
+     load_color: 'radial-gradient(#353c44, #222931)' # '#37474f'
+     load_style: gooey # default|gooey|image
+     load_image:  # url

配置项参数说明：

enable：控制加载动画的开关，取值有true和false，true开启，false关闭。
load_color：该配置项为自定义加载动画背景颜色。默认值为#37474f,使用时注意用''包起来，不然会被识别成注释符。
这个配置项最大的作用是配合load_image使用的图片的背景色，可以用取色器提取自定义图片的主要色调，以达到图片和背景融为一体的效果。
load_style：控制加载动画的样式
- default是主题原版的盒子加载动画（使用还需创建 default.pug、default.styl）
- gooey自定义粘性加载动画
- image为自定义添加静态图片或gif作为加载动画。
load_image：该配置项的生效前提是load_style设置为image,内容填写图床链接或者本地相对地址。

淡出动画

修改 [Blogroot]/themes/butterfly/layout/includes/loading/loading-js.pug

- script.
+ script(async).
    var preloader = {
      endLoading: () => {
        document.body.style.overflow = 'auto';
+       document.getElementById('loading-box').style.transition = 'opacity 3s ease 0s'
+       document.getElementById('loading-box').style.opacity = '0'
+       setTimeout(function(){
          document.getElementById('loading-box').classList.add("loaded")
+       }, 3000);
      },
      initLoading: () => {
        document.body.style.overflow = '';
+       document.getElementById('loading-box').style.transition = '';
+       document.getElementById('loading-box').style.opacity = '1'
        document.getElementById('loading-box').classList.remove("loaded")

      }
    }
    window.addEventListener('load',()=> {preloader.endLoading()})
+   setTimeout(function(){preloader.endLoading();}, 3000);