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


Posted in Javascript onOctober 20, 2017

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

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

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

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

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

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

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

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

helloWorld.vue组件里:

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

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

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

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

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

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

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

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

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

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

...

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

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

总结

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

Javascript 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 #Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 #Javascript
2种简单的js倒计时方式
Oct 20 #Javascript
pm2 部署 node的三种方法示例
Oct 20 #Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 #Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 #Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
十天学会php(1)
2006/10/09 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
JavaScript 截取字符串代码实例
2019/09/05 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
python sleep和wait对比总结
2021/02/03 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
运动会入场词100字
2014/02/06 职场文书
预备党员公开承诺书
2014/05/28 职场文书
党员对照检查材料
2014/09/22 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android