基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式


Posted in Javascript onJanuary 17, 2018

本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果。并且基于 Vue.js 2.0 全家桶。具体效果如下图所示:

最终效果可以翻到文章最后观看。

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式 

1. 背景视频 Web 页面的既有实现方式

国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示:

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式 

教程如下所示:

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式 

从图中以及我的实践可以得出以下观点:

  • 该教程使用了 jQuery 。由于我们想要使用 Vue.js,则 jQuery 可被完全替代掉。
  • 该教程的 CSS、JavaScript 代码均过于冗余。
  • 直接运行示例,发现效果并不好,浏览器窗口随意拉伸时,背景视频并不能完美适配「会出现黑边等瑕疵」,效果未达到预期。

2. 设计完美的背景视频 Web 页面

首先基于脚手架工具 vue-cli 来创建一个使用 vue-loader 的项目,构建完毕后,在相应目录下创建「.vue」文件,作为登录页面的模板文件,具体细节不再赘述。本节内容仅局限于该.vue文件。

2.1 HTML 模板

基于需求,对 Coverr 提供的 HTML 模板进行了细微修改,结果如下:

<template>
 <div class="homepage-hero-module">
 <div class="video-container">
 <div :style="fixStyle" class="filter"></div>
 <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
 <source src="PATH_TO_MP4" type="video/mp4"/>
 浏览器不支持 video 标签,建议升级浏览器。
 <source src="PATH_TO_WEBM" type="video/webm"/>
 浏览器不支持 video 标签,建议升级浏览器。
 </video>
 <div class="poster hidden" v-if="!vedioCanPlay">
 <img :style="fixStyle" src="PATH_TO_JPEG" alt="">
 </div>
 </div>
 </div>
</template>

模板中, filter 类的 div 标签是一层背景视频的蒙版,可以通过蒙版控制视频的亮暗以及色温等。

video 标签为标准的 HTML5 标签,提供两种格式的视频以及一张图片占位符,背景视频在加载完毕后即自动播放。

Coverr 提供的原始模板,直接调试,页面只显示图片,而无法播放视频,通过使用 Vue.js 的 v-if 指令解决了该问题。

2.2 CSS

对原始模板 CSS 代码进行了大幅精简,修改后的 CSS 代码如下所示:

<style scoped>
 .homepage-hero-module,
 .video-container {
 position: relative;
 height: 100vh;
 overflow: hidden;
 }
 .video-container .poster img,
 .video-container video {
 z-index: 0;
 position: absolute;
 }
 .video-container .filter {
 z-index: 1;
 position: absolute;
 background: rgba(0, 0, 0, 0.4);
 }
</style>

由于大多数样式均被项目全局修改了,所以在此专用于此模板的样式只剩下三条,简要说明如下:

  • 容器 div 铺满浏览器窗口
  • 蒙版 div 位于视频的上方,以起到蒙版的作用。

2.3 JavaScript 代码

<script>
 export default {
 name: 'login',
 data() {
 return {
 vedioCanPlay: false,
 fixStyle: ''
 }
 },
 methods: {
 canplay() {
 this.vedioCanPlay = true
 }
 },
 mounted: function() {
 window.onresize = () => {
 const windowWidth = document.body.clientWidth
 const windowHeight = document.body.clientHeight
 const windowAspectRatio = windowHeight / windowWidth
 let videoWidth
 let videoHeight
 if (windowAspectRatio < 0.5625) {
  videoWidth = windowWidth
  videoHeight = videoWidth * 0.5625
  this.fixStyle = {
  height: windowWidth * 0.5625 + 'px',
  width: windowWidth + 'px',
  'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
  'margin-left': 'initial'
  }
 } else {
  videoHeight = windowHeight
  videoWidth = videoHeight / 0.5625
  this.fixStyle = {
  height: windowHeight + 'px',
  width: windowHeight / 0.5625 + 'px',
  'margin-left': (windowWidth - videoWidth) / 2 + 'px',
  'margin-bottom': 'initial'
  }
 }
 }
 window.onresize()
 }
 }
</script>

以上代码中最重要的部分是对 window 对象的 onresize 事件的监听。当窗口大小更改时,程序同步修改 video 及蒙版 dom 的尺寸,使得视频的最窄的边始终撑满浏览器的窗口,而长的边左右两边被均匀地裁减。

这样操作,可以使得视频不会被拉伸,视频中心始终位于浏览器的中心,并且在随意拉伸浏览器窗口时,视频的内容始终得到最大限度的保留,并且可以得到最好的视觉效果。

最终效果如下所示:

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式 

参考资料

资源网站「Coverr」

Vue.js 中文官网

总结

以上所述是小编给大家介绍的基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 #Javascript
angularjs 页面自适应高度的方法
Jan 17 #Javascript
VueJs监听window.resize方法示例
Jan 17 #Javascript
详解AngularJS之$window窗口对象
Jan 17 #Javascript
React-native桥接Android原生开发详解
Jan 17 #Javascript
vue自定义指令directive实例详解
Jan 17 #Javascript
移动web开发之touch事件实例详解
Jan 17 #Javascript
You might like
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
vue登录注册实例详解
2019/09/14 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python编程中的异常处理教程
2015/08/21 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
开办饭店创业计划书
2013/12/28 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
新员工入职欢迎词
2015/01/23 职场文书
院系推荐意见
2015/06/05 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS