
2分钟实现流行的背景视频特效
现在很多APP官网都开始用视频作为背景,看起来各种高端大气上档次。
录个视频很简单,但要把背景视频播放细节做好却不太容易。
Vide把这件事变得不能再简单了。先来看看它的效果:
不错吧 :)
要做成这样,只需要bower install 一下:
bower install vide
然后引用JS
<script src="js/jquery.vide.min.js"></script>
将素材按以下目录结构放置
path/ ├── to/ │ ├── video.mp4 │ ├── video.ogv │ ├── video.webm │ └── video.jpg
最后在要引用的Dom元素上添加data-vide-bg属性即可:
<div style="width: 1000px; height: 500px;" data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%"> </div>
当然你也可以直接用JS触发:
$("#myBlock1").vide("path/to/video"); $("#myBlock2").vide("path/to/video", { ...options... });
一切就OK了。赶紧收藏起来吧,下次你的老板让你搞个NB的首页时,拿出来帅呆他。
「GetParty」
关注微信号,推送好文章
微信中长按图片即可关注