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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
js实现全选和全不选功能
Jul 28 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 array_unique之后json_encode需要注意
2011/01/02 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
js实现上传并压缩图片效果
2018/01/10 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
javascript中layim之查找好友查找群组
2021/02/06 Javascript
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
西门豹教学反思
2014/02/04 职场文书
个人自查自纠材料
2014/10/14 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
Python实现单例模式的5种方法
2021/06/15 Python
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸