vue做网页开场视频的实例代码

本demo背景是一个视频，文字是打印机效果，按钮在文字打完才会显示，点击按钮背景向上收起，同时显示默认首页组件（如是初建vue项目列表，则为helloWorld.vue的组件内容）

公司电脑没有gif动图尽情谅解

文末会附上demo地址，如需看效果，可前往下载

本人一直很喜欢网页开场有一段视频或动画，个人认为网页的开场动画起到引导浏览作用，相当于网页的一个开始，一个好的开始往往就成功了一半，对于浏览网站的用户来说，也就吸引了极大地注意力。

以上都是废话，网页开场动画在移动端的应用十分广泛，具体操作以后工作涉及到会在简书更新。今天我们主要讲述vue做pc端网页开场动画。

vue项目列表里与src同级有一个index.html，我们主要在这里做文章。

1.首先我们要明白vue渲染组件都是基于这个主页index，用vue新建项目，打开网页的时候有一个默认打开的组件，这个不多解释。我们要做的就是把这个组件隐藏，不然他的内容会出现在这个视频的上面。

helloWorld.vue组件里：

index.html里将helloWorld组件里的hello<div>移除，当然在此之前你要先将它存储到另一个容器里暂存一下，或者克隆也行（克隆代码不演示了，有问题评论或私信都可以）。暂存的作用就是为了后面把这个节点再恢复到页面。

2.直接在index页面引入视频，本demo是直接找了个视频插件放进去，这一步很简单，需要引入的文件都放入静态文件夹static下。

需要注意的是，首页的样式直接影响到组件里标签的样式，所以在引入插件的时候，注意样式的调节，避免直接用标签写样式

3.如果背景已经是视频了，从审美角度，网页上最多添一些字就可以了，样式太多会乱且浮夸。本demo也使用了一个叫typewrite.js的插件。一个一个打出字的效果。

4.给按钮设个定时，算好字打完的时间，按钮显示，点击按钮的同时，index的整个背景容器向上收起（你主页所有的html内容放在一个容器里），并且将hello组件内容恢复。hello随便写点内容。

...

demo涉及element等配置问题，直接拿两个页面代码出来也可能实现不了我所展示的效果，感兴趣可以访问我github地址：

https://github.com/JOSIE1988/Vue-start-video

总结

以上所述是小编给大家介绍的vue做网页开场视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue做网页开场视频的实例代码

    vue做网页开场视频的实例代码

    本demo背景是一个视频,文字是打印机效果,按钮在文字打完才会显示,点击按钮背景向上收起,同时显示默认首页组件(如是初建vue项目列表,则为helloWorld.vue的组件内容) 公司电脑没有gif动图尽情谅解 文末会附上demo地址,如需看效果,可前往下载 本人一直很喜欢网页开场有一段视频或动画,个人认为网页的开场动画起到引导浏览作用,相当于网页的一个开始,一个好的开始往往就成功了一半,对于浏览网站的用户来说,也就吸引了极大地注意力. 以上都是废话,网页开场动画在移动端的应用十分广泛,具体操

  • vue中将网页打印成pdf实例代码

    整理文档,搜刮出一个vue中将网页打印成pdf的代码,稍微整理精简一下做下分享. <template> <div class="pdf-wrap" id="pdfWrap"> <button v-on:click="getPdf">点击下载PDF</button> <div class="pdf-dom" id="pdfDom"></div&

  • 使用Python做垃圾分类的原理及实例代码

    0 引言 纸巾再湿也是干垃圾?瓜子皮再干也是湿垃圾??最近大家都被垃圾分类折磨的不行,傻傻的你是否拎得清?

  • 使用Python做垃圾分类的原理及实例代码附源码

    0 引言 纸巾再湿也是干垃圾?瓜子皮再干也是湿垃圾??最近大家都被垃圾分类折磨的不行,傻傻的你是否拎得清?

  • 用python做一个搜索引擎(Pylucene)的实例代码

    用python做一个搜索引擎(Pylucene)的实例代码

    1.什么是搜索引擎? 搜索引擎是"对网络信息资源进行搜集整理并提供信息查询服务的系统,包括信息搜集.信息整理和用户查询三部分".如图1是搜索引擎的一般结构,信息搜集模块从网络采集信息到网络信息库之中(一般使用爬虫):然后信息整理模块对采集的信息进行分词.去停用词.赋权重等操作后建立索引表(一般是倒排索引)构成索引库:最后用户查询模块就可以识别用户的检索需求并提供检索服务啦. 图1 搜索引擎的一般结构 2. 使用python实现一个简单搜索引擎 2.1 问题分析 从图1看,一个完整的搜索

  • video.js 一个页面同时播放多个视频的实例代码

    具体代码如下所述: $(data).each(function(i, item) { // innerHTML += '<li type-id="'+item.id+'">'+ // '<img src="'+(item.imgs?item.imgs:'../../img/videoBg1.jpg')+'" alt="">'+ // '<p>'+item.name+'</p>'+ // '</

  • vue router 用户登陆功能的实例代码

    有些路由页面需要用户登陆之后才能访问如(用户中心),如果用户没有登陆就访问这些页面的话就应该转换到登陆页面,登陆成功之后在进入该页面. 需要用到的知识点有:H5中的会话存储(sessionStorage).vue-router路由前置操作.路由元信息(meta). 路由配置 在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆. const router = new Router({ mode: 'history', base: process.env.BASE_URL, route

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • vue实现PC端录音功能的实例代码

    录音功能一般来说在移动端比较常见,但是在pc端也要实现按住说话的功能呢?项目需求:按住说话,时长不超过60秒,生成语音文件并上传,我这里用的是recorder.js 1.项目中新建一个recorder.js文件,内容如下,也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMed

  • Vue调用后端java接口的实例代码

    前段时间 做了个学校的春萌项目,其中用到vue连接后端java接口. 先上后端接口代码: package controller; import net.sf.json.JSONObject; import util.DBUtil; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax

随机推荐