欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

vue实现网页开场视频代码

程序员文章站 2022-04-12 08:58:46
...
本文主要介绍了vue做网页开场视频的实例代码,需要的朋友可以参考下,希望能帮助到大家。

vue实现网页开场视频代码

本demo背景是一个视频,文字是打印机效果,按钮在文字打完才会显示,点击按钮背景向上收起,同时显示默认首页组件(如是初建vue项目列表,则为helloWorld.vue的组件内容)

公司电脑没有gif动图尽情谅解

文末会附上demo地址,如需看效果,可前往下载

本人一直很喜欢网页开场有一段视频或动画,个人认为网页的开场动画起到引导浏览作用,相当于网页的一个开始,一个好的开始往往就成功了一半,对于浏览网站的用户来说,也就吸引了极大地注意力。

以上都是废话,网页开场动画在移动端的应用十分广泛,具体操作以后工作涉及到会在简书更新。今天我们主要讲述vue做pc端网页开场动画。

vue项目列表里与src同级有一个index.html,我们主要在这里做文章。

1.首先我们要明白vue渲染组件都是基于这个主页index,用vue新建项目,打开网页的时候有一个默认打开的组件,这个不多解释。我们要做的就是把这个组件隐藏,不然他的内容会出现在这个视频的上面。

helloWorld.vue组件里:

vue实现网页开场视频代码

index.html里将helloWorld组件里的hello<p>移除,当然在此之前你要先将它存储到另一个容器里暂存一下,或者克隆也行(克隆代码不演示了,有问题评论或私信都可以)。暂存的作用就是为了后面把这个节点再恢复到页面。

vue实现网页开场视频代码

2.直接在index页面引入视频,本demo是直接找了个视频插件放进去,这一步很简单,需要引入的文件都放入静态文件夹static下。

需要注意的是,首页的样式直接影响到组件里标签的样式,所以在引入插件的时候,注意样式的调节,避免直接用标签写样式

3.如果背景已经是视频了,从审美角度,网页上最多添一些字就可以了,样式太多会乱且浮夸。本demo也使用了一个叫typewrite.js的插件。一个一个打出字的效果。

vue实现网页开场视频代码

4.给按钮设个定时,算好字打完的时间,按钮显示,点击按钮的同时,index的整个背景容器向上收起(你主页所有的html内容放在一个容器里),并且将hello组件内容恢复。hello随便写点内容。

vue实现网页开场视频代码

vue实现网页开场视频代码

...

demo涉及element等配置问题,直接拿两个页面代码出来也可能实现不了我所展示的效果,

相关推荐:

Html网页页面head区规范知识

【CSS 】网站页面变灰

JS和CSS实现网页加载中的动画效果分享

以上就是vue实现网页开场视频代码的详细内容,更多请关注其它相关文章!

上一篇: 重温PHP

下一篇: vue实现键盘效果