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

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

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

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

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

教程如下所示:

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

  • 该教程使用了 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 的尺寸,使得视频的最窄的边始终撑满浏览器的窗口,而长的边左右两边被均匀地裁减。

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

最终效果如下所示:

参考资料

资源网站「Coverr

Vue.js 中文官网

总结

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

您可能感兴趣的文章:

  • vue.js实现用户评论、登录、注册、及修改信息功能
  • Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
  • Vue.js实现一个SPA登录页面的过程【推荐】
时间: 2018-01-14

Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用. 这个应用始终遗留了一个问题,Web App在访问REST API时,没有经过任何认证,这使得服务端的REST API是不安全的,只要有人知道api地址,就可以调用API对服务端的资源进行修改和删除. 今天我们就来探讨一下如何结合Web API来限制资源的访问. 本文的主要内容如下: 介绍传统的Web应用和基于REST服务的Web应用 介绍OAuth认证流程和

Vue.js实现一个SPA登录页面的过程【推荐】

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

vue.js实现用户评论、登录、注册、及修改信息功能

vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo

Vue.js中Line第三方登录api的实现代码

国际化的项目就会用用到一些第三方的登录api,这次记录一下Line 的! 按步骤来: 注册Line账号就不说了,虽然麻烦,这就自己去想办法了! demo 请狠狠的戳这里 http://download.lllomh.com/cliect/#/product/J417081951162505 一:开发者平台配置 去Line 的开发者平台 新建一个App: https://developers.line.biz/en/ ​ ​ 顺便写好资料: ​ 动态演示: ​ 这要 用到的 就是2个: Chann

Node.js实现用户评论社区功能(体验前后端开发的乐趣)

前面 接着上一节的内容来,今天我们要完成一个用Node开发后台服务器,实现一个简单的用户评论社区.可以先看下效果图: 开始建立项目文件夹comment-list,在里面新建一个public文件夹,public文件夹存放我们允许客户端访问的资源,这里是公开的.app.js文件是我们服务端代码. 在index.html文件中放的是网站的首页内容,这里采用bootstrap框架快速搭建.可以先招一些假数据,以便页面渲染后看效果.核心代码: <ul class="list-group commen

Spring boot+mybatis+thymeleaf 实现登录注册增删改查功能的示例代码

本文重在实现理解,过滤器,业务,逻辑需求,样式请无视.. 项目结构如下 1.idea新建Spring boot项目,在pom中加上thymeleaf和mybatis支持.pom.xml代码如下 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3

Vue.js中对css的操作(修改)具体方式详解

使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas

Vue.js递归组件实现组织架构树和选人功能案例分析

大家好!先上图看看本次案例的整体效果. **浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不能容易太多.下面就手把手带您一步步拨开这个案例的层层迷雾.** 实现步骤如下: 1. api构建部门和员工信息接口,vuex全局存放部门list和员工list数据信息. api: export default { getEmployeeList () { return { returncode:

vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it

vue.js项目 el-input 组件 监听回车键实现搜索功能示例

基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

vue.js使用v-model指令实现的数据双向绑定功能示例

本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能.分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过

vue.js实现的全选与全不选功能示例【基于elementui】

本文实例讲述了vue.js实现的全选与全不选功能.分享给大家供大家参考,具体如下: elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in o