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做网页开场视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- Vue 莹石摄像头直播视频实例代码
- vue中将网页打印成pdf实例代码
- [转]网页中插入视频播放代码全集
- vue移动端裁剪图片结合插件Cropper的使用实例代码
- 支持wmv、mpg、mov、avi格式的网页视频播放代码
- 网页中播放FLV视频文件的代码
- 网页播放的视频代码
- [z]网页播放的视频代码
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- 加载 vue 远程代码的组件实例详解
- iOS视频压缩存储至本地并上传至服务器实例代码
- c# 获取网页中指定的字符串信息的实例代码
- 网页播放的本地视频代码
- vue-router 实现导航守卫(路由卫士)的实例代码
- 基于vue 实现token验证的实例代码
- 支持wmv、mpg、mov、avi格式的网页视频播放代码
- 网页播放的视频代码
- 微信开发从入门到精通教程大全 资料大全 java和php版本;教程文档、代码、视频 微信商城实例
- 在网页中插入视频播放代码全集
- 使用 Vue 绑定单个或多个 Class 名的实例代码