达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
vue做网页开场视频的实例代码-创新互联
本demo背景是一个视频，文字是打印机效果，按钮在文字打完才会显示，点击按钮背景向上收起，同时显示默认首页组件（如是初建vue项目列表，则为helloWorld.vue的组件内容）
公司电脑没有gif动图尽情谅解
文末会附上demo地址，如需看效果，可前往下载
本人一直很喜欢网页开场有一段视频或动画，个人认为网页的开场动画起到引导浏览作用，相当于网页的一个开始，一个好的开始往往就成功了一半，对于浏览网站的用户来说，也就吸引了极大地注意力。
以上都是废话，网页开场动画在移动端的应用十分广泛，具体操作以后工作涉及到会在简书更新。今天我们主要讲述vue做pc端网页开场动画。
vue项目列表里与src同级有一个index.html，我们主要在这里做文章。
1.首先我们要明白vue渲染组件都是基于这个主页index，用vue新建项目，打开网页的时候有一个默认打开的组件，这个不多解释。我们要做的就是把这个组件隐藏，不然他的内容会出现在这个视频的上面。
helloWorld.vue组件里：
index.html里将helloWorld组件里的hello
移除，当然在此之前你要先将它存储到另一个容器里暂存一下，或者克隆也行（克隆代码不演示了，有问题评论或私信都可以）。暂存的作用就是为了后面把这个节点再恢复到页面。
本文标题：vue做网页开场视频的实例代码-创新互联
标题来源：http://dzwzjz.com/article/dgpgci.html
2.直接在index页面引入视频，本demo是直接找了个视频插件放进去，这一步很简单，需要引入的文件都放入静态文件夹static下。
需要注意的是，首页的样式直接影响到组件里标签的样式，所以在引入插件的时候，注意样式的调节，避免直接用标签写样式
3.如果背景已经是视频了，从审美角度，网页上最多添一些字就可以了，样式太多会乱且浮夸。本demo也使用了一个叫typewrite.js的插件。一个一个打出字的效果。
4.给按钮设个定时，算好字打完的时间，按钮显示，点击按钮的同时，index的整个背景容器向上收起（你主页所有的html内容放在一个容器里），并且将hello组件内容恢复。hello随便写点内容。
...
demo涉及element等配置问题，直接拿两个页面代码出来也可能实现不了我所展示的效果，感兴趣可以访问我github地址：
https://github.com/JOSIE1988/Vue-start-video
总结
以上所述是小编给大家介绍的vue做网页开场视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联成都网站设计公司网站的支持！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文标题：vue做网页开场视频的实例代码-创新互联
标题来源：http://dzwzjz.com/article/dgpgci.html