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

站长资源 2024/11/28 佚名

2 0 1

本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,网页,视频

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“vue做网页开场视频的实例代码”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

深入浅析ES6 Class 中的 super 关键字

使用JS中的Replace()方法遇到的问题小结

评论“vue做网页开场视频的实例代码”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接