本文最后更新于:2024年5月7日 下午
受到 七夏浅笑 小姐姐博客的启发,决定把自己的视频背景做成固定不动的,本文记录相关内容。
背景
已经实现上述功能的基础版本主题代码 version2.0
目标:
- 背景视频固定
- 视频随机切换
- 优先显示视频预加载图像
- 不影响博客其余部分正常显示
实现过程
我不是学前端出身,实现功能全屏直觉,为了实现效果抛弃了一切规范和逻辑,实现仅供参考,不负责任
思路
- 主要修改
fluid/layout/layout.ejs
文件,将背景图像和视频从 banner
的 div 中拿出来,放在body的开头
- 创建三层 div,分别是 mask, image, video, 为他们设置不通的 z-index,保证图像顺序为上述顺序
- 动态调整 image, video 的图像链接和尺寸,目的是让图像视频时刻撑满屏幕并且随机切换
- 修改
source/css/_pages/_base/_widget/banner.styl
文件,使得原始的mask透明度为0,新建mask设置黑色,透明度0.4
- 修改目录文字颜色,浅色比较合适
- 修改footer文字颜色,浅色比较合适,和步骤五相同的颜色比较好
具体修改 :https://github.com/zywvvd/hexo-theme-fluid/commit/4b26111d5961e30e3483825dad68f6960759b7fb
核心调整
fluid/layout/layout.ejs
文件
- 在 body 刚开始设置 div 包裹 mask, image, video
1 2 3 4 5 6 7 8 9 10 11 12
| ... <body> <div id="banner_video_insert"> </div> <div> <div class='real_mask'></div> <div id="banner_video_insert"> </div> <div id='vvd_banner_img'> </div> </div> ...
|
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
| <% if(banner_video){ %> <script> var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), isAndroid = ua.match(/(Android)\s+([\d.]+)/), isMobile = isIphone || isAndroid;
function set_video_attr(id){
var height = document.body.clientHeight var width = document.body.clientWidth var video_item = document.getElementById(id);
if (height / width < 0.56){ video_item.setAttribute('width', '100%'); video_item.setAttribute('height', 'auto'); } else { video_item.setAttribute('height', '100%'); video_item.setAttribute('width', 'auto'); } }
$.getJSON('/vvd_js/video_url.json', function(data){ if (!isMobile){ var video_list_length = data.length var seed = Math.random() index = Math.floor(seed * video_list_length) video_url = data[index][0] pre_show_image_url = data[index][1] banner_obj = document.getElementById("banner") banner_obj.style.cssText = "background: url('" + pre_show_image_url + "') no-repeat; background-size: cover;"
vvd_banner_obj = document.getElementById("vvd_banner_img")
vvd_banner_content = "<img id='banner_img_item' src='" + pre_show_image_url + "' style='height: 100%; position: fixed; z-index: -999'>" vvd_banner_obj.innerHTML = vvd_banner_content
video_html_res = "<video id='video_item' style='position: fixed; z-index: -888;' muted='muted' src=" + video_url + " autoplay='autoplay' loop='loop'></video>" document.getElementById("banner_video_insert").innerHTML = video_html_res;
set_video_attr('video_item') set_video_attr('banner_img_item') } });
if (!isMobile){ window.onresize = function(){ set_video_attr('video_item') } } </script> <% } %>
|
- 其中很重要的是需要为video 和 img 元素设置
position: fixed; z-index: num;
属性
- 在
source/css/_pages/_base/_widget/banner.styl
文件中加入新mask的css代码,配置position: fixed; z-index: num;
属性
1 2 3 4 5 6
| .real_mask position fixed width 100% height 100% background-color rgba(0, 0, 0, 0.4) z-index -777
|
- 需要保证
z-index
值,mask > video > image,这样 mask 一直生效,image 预加载会正常显示,视频加载出来后会覆盖图像
- position: fixed 这句话是核心
周边调整
- 调整文章目录导航文字颜色
- 调整 footer 文字颜色
比较简单了,可以参考我的代码修改
完整主题
version3.0
参考资料
文章链接:
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-video-bg-fixed/fluid-video-bg-fixed/