第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

让首页背景动起来是怎样一种感觉?8张图告诉你真相!

时间:2018-02-07 15:28来源:A5企业专栏 作者:跌名 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
现在越来越多的设计师开始在网页中使用循环视频作为背景,这种现象的出现主要有两个原因。一方面,移动设备性能不断完善,网速越来越快,用户能够且有条件在移动设备上浏览视频背景

undefined

  现在越来越多的设计师开始在网页中使用循环视频作为背景,这种现象的出现主要有两个原因。一方面,移动设备性能不断完善,网速越来越快,用户能够且有条件在移动设备上浏览视频背景的网站;另一方面,随着HTML5技术的发展,很多主流浏览器的视频标签都支持循环(Loop)属性,网页上单个或一系列视频短片的循环播放效果正是依靠这一属性实现的。与其他网页设计技巧相比,在网页中使用循环视频背景有一定的优势,循环视频能将丰富的信息和多变的内容以生动活泼的方式呈现出来,在助力提升网页设计感、增强用户对网站信任感、提高用户转化率等方面可以发挥不小的作用。既然循环视频背景这么火热,今天小飞就带大家来看看什么是循环视频背景,以及一些优秀的网站范例。

  什么是循环视频背景?

  循环视频背景这个概念很好理解,网页开发者们将视频作为背景循环播放,而视频通常会围绕某个主题(如公司产品)展开,或是展示达成某个目标的过程,以让用户对整个网站有更加详尽的了解。目前循环视频背景在网站中的应用十分广泛,不管是作品展示类网站还是产品介绍类网站,不管是电脑端网站还是移动端专题网站,你都能看到循环视频的身影。不过不同的网站在使用循环视频时都有各自的侧重点,下面是一些循环视频背景网站的栗子:

  1. Spacejunk

  这个网站从一开始就在突出品牌标识"Spacejunk",以给用户留下深刻印象。Spacejunk是一家提供视频编辑、实景拍摄等服务的工作室,所以他们网站的背景视频是由好几个不同场景的视频作品整合而成的,这些作品涉及的领域很广,但专业水平都是毋庸置疑的。背景视频的运用更能向用户证明Spacejunk这个团队的专业度,让他们对这个品牌产生信赖感。

  

undefined

  2. Pastamancini

  Pastamancini是一个出售意大利面等食品的网上商店。网站的背景视频中呈现了壮观的田园风光,刻画了谷物收割、成品晾晒等多个场景。用户在浏览视频时就可以了解食品的加工过程,对食品的质量也比较放心。背景视频还让整个网站因此充满了自然和活力的气息。

  

undefined

  3. Distill

  Distill是一个提供创意短视频的网站平台,其中的高清视频可免费用于个人或商业项目。它在网站背景上使用了河水涓涓流淌的视频,这一方面与网站主题"distill(蒸馏、提取精华)"相呼应,强调网站上有很多高质量的视频,另一方面也在暗示网站的创意视频将源源不断地供应。

  

undefined

  4. Drygital

  打开 Drygital 的页面,映入眼帘的短视频很是炫目,整个网站都充满了活力与动感,褪色特效也让视频和浮在视频之上的LOGO形成了鲜明的对比。这个网站还有一点巧妙的设计就在于Drygital这个Logo区块的颜色会随着视频的播放而不断变化,在视觉上很是赏心悦目。

  

undefined

  5. Z+

  Z+是模仿2048制作出来的一款游戏,玩家需要不断滑动屏幕以获取最终的Z字母。首页上的循环视频是用来演示游戏的操作方法的,利用循环视频展示工作流程是这类视频设计的一个重要分支。不过Z+还在视频中插入了一些微妙的元素,比如页面手机上的视频播放键,点击即可观看完整视频。

  

undefined

  6. I am Baaz

  这是Iam Baaz的个人网站,他是一位电影制作人和摄影师。为了让整个网站看起来创意十足,整个循环视频背景由几个专业的小视频组成,着重呈现Iam Bazz的生活方式、城市体育、时尚、旅行等方面。视频背景让Iam Bazz的个人形象更加饱满,展示的手绘字体和视频背景相得益彰,排版设计看上去也费了不少心思,你能从视频中感受到这位电影人的专业和热忱。

  

undefined

  7. Vesper Hotel

  Vesper Hotel网站的背景视频展示了大海、夕阳、田野等等,一帧一帧的画面呈现出了Vesper酒店独特的美,生动的视频更具说服力,更能让用户相信:预定Vesper酒店就可以收获一段难忘的休闲时光。

  

undefined

  8. Umbrella Here

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕