基于 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登录页面的过程【推荐】
(0)

相关推荐

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

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

  • 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实现用户评论、登录、注册、及修改信息功能

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

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

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我

  • 基于Vue.js 2.0实现百度搜索框效果

    使用Vue.js 2.0 模仿百度搜索框效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum

  • 基于JS实现十种酷炫的网页特效

    目录 1.鼠标点击弹出爱心 2.鼠标点击弹出文字 3.鼠标点击弹出烟花波纹 4.鼠标小星星拖尾跟随 5.鼠标粒子随心拖尾跟随 6.鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果(自由组合) 7.樱花特效 8.蜘蛛网特效 9.看板娘(左下角的小人) 10.烟花 1.鼠标点击弹出爱心 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • 基于Python Dash库制作酷炫的可视化大屏

    目录 介绍 数据 大屏搭建 介绍 大家好,我是小F- 在数据时代,我们每个人既是数据的生产者,也是数据的使用者,然而初次获取和存储的原始数据杂乱无章.信息冗余.价值较低. 要想数据达到生动有趣.让人一目了然.豁然开朗的效果,就需要借助数据可视化. 以前给大家介绍过使用Streamlit库制作大屏,今天给大家带来一个新方法. 通过Python的Dash库,来制作一个酷炫的可视化大屏! 先来看一下整体效果,好像还不错哦. 主要使用Python的Dash库.Plotly库.Requests库. 其中R

  • Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • Vue.js 2.0学习教程之从基础到组件详解

    前言 最近这段时间里不停的做着Vue的技术分享,虽然不是什么深层次的代码底能架构,如果底层架构真说出来,我就不会做Vue.js 2.0从基础到组件了,就会分享Vue从底层到还是到底层.我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题.此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难,大错特错! 对Vue 2.0的介绍 我对Vue 2.0认知,能it前端框架的认知,在我们不算底层原理的情况下,什么才是精髓,那就是基础的方法和一些api介

  • Vue.js 2.0 和 React、Augular等其他前端框架大比拼

    React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 保持注意力集中在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. 相似的作用域,我们会用更多的时间来讲这一块的比较.不仅我们要保持技术的准确性,同时兼顾平衡.我们指出React比Vue更好的地方,例如,他们的生态系统和丰富的自定义渲染器. React社区在这里非常积极地帮助我们实现这一平衡,特别感谢来自 React

  • 详解Vue.js 2.0 如何使用axios

    Vue.js 1.0 我们常使用 vue-resource (官方ajax库), Vue 2.0 发布后作者宣告不再对 vue-resource 进行更新, 推荐我们使用 axios (基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用) 安装 axios 使用 npm npm install axios 使用 yarn yarn add axios 使用 axios 如同使用 vue-resource 一样使用 main.js import axios f

  • 基于VUE.JS的移动端框架Mint UI的使用

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

随机推荐