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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
Vue.use源码学习小结
Jun 20 Javascript
详解 微信小程序开发框架(MINA)
May 17 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
JavaScript类库D
2010/10/24 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
jquery实现数字输入框
2017/02/22 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
python 获取等间隔的数组实例
2019/07/04 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
python的列表List求均值和中位数实例
2020/03/03 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
python实现最速下降法
2020/03/24 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
文明学生事迹材料
2014/01/29 职场文书
大学生找工作求职信
2014/07/09 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
python之django路由和视图案例教程
2021/07/26 Python