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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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项目打包方法
2008/02/18 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python实现简单flappy bird
2018/12/24 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python线程指南分享
2019/11/19 Python
解决python 找不到module的问题
2020/02/12 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
端口镜像是怎么实现的
2014/03/25 面试题
广告词串烧
2014/03/19 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
学校宣传标语
2014/06/18 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
秦兵马俑导游词
2015/02/02 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL