基于 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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
js Function类型
Dec 04 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
vue项目中js-cookie的使用存储token操作
Nov 13 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
自荐信写法介绍
2014/01/25 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
小学生运动会报道稿
2014/09/12 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
python 批量压缩图片的脚本
2021/06/02 Python