16款使用视频背景为设计元素的网页欣赏

2016-02-16 19:11 6 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的16款使用视频背景为设计元素的网页欣赏懂设计的网友们快点来了解吧!

【 tulaoshi.com - 平面设计 】

网站并不一定非得是静态的。HTML5和CSS3的兴起使得网站开发有了更多的可能性。借助HTML5,越来越多的将动态视频用作网站首页的背景,营造独特的浏览体验。这种动态的背景视频,不仅有趣,而且能让用户有种身临其境的感觉。

使用视频背景之后,网站以一种极具创造性的方式营造出独特的氛围,这比起静态的背景容纳更多的信息。它可以改变网页风格,讲述网站的内容,展现操作过程,当然,也可以像静态背景一样单纯的表现一种情绪,方便而有趣。以下是我们搜集的案例,希望能给你带来一些启示。

01. mediaBOOM

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

这是一家互动广告公司的网页,背景视频展现的是一个虚构的世界,其中充满了带有复古风情的美洲风景。

02. MyProvence Festival

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

Myprovence展现的是艺术家对于这一地区的探索。

03. Spotify

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

音乐服务网站Spotify,网页中的视频背景展示的是Spotify的音乐是如何融入人们多姿多彩的生活。当然,如果你对Spotify有兴趣的话,可以看看这篇《小图标大学问!我是如何设计著名音乐软件SPOTIFY里的图标》。

04. Life of Pi

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

这是电影《少年Pi的奇幻漂流》拍摄花絮网站,背景视频就是李安拍摄这部传奇电影背后的花絮。

05. Telly

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

Telly是一个创业项目,网站的背景视频展示的是随风摇摆的草地,营造出独特的氛围。

06. Fernando Maclen

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

这是天才设计师Fernando Maclen的个人网站,其中虚化的背景视频展示的是他的设计生活。

07. Windward

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

这是一款iPhone应用的网站,这款为水手开发的应用可以展示潮汐、风速和温度等数据。背景视频中波涛汹涌的大海很好地营造出氛围。

08. Matter

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

网站背景视频中展示的是随机选定的人物视频,非常独特,令人难忘。

09. Eagleclean

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

这是伦敦保洁公司Eaglechean的网站,背景视频颇为幽默。

10. Dromoland Castle

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

Dromoland Castle是爱尔兰著名的酒店和乡村庄园,背景视频展现出酒店附近的自然美景。

11. Y.CO Yachts

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

网站使用视频背景展示了在游艇上度假的美好环境。

12. Flipboard

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

著名新闻应用Flipboard的网站,视频背景展示了Flipboard的使用场景。

13. Nike Jordan M6

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

网站的时评背景展示了新鞋是如何设计完成的。

14. Arcade Fire

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

这是独立摇滚乐队Arcade Fire的官方网站,视频背景会随着音乐播放同步进行。

15. The Cassette

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

这是一个法国鞋店的网站,其中的视频背景巧妙地展示了它在不同角度的样子。

16. The Wood

16款使用视频背景为设计元素的网页欣赏,PS教程,图老师教程网

这是The Wood 餐厅的网站,视频背景微妙地展示出餐厅质朴的装饰和氛围。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

来源:http://www.tulaoshi.com/n/20160216/1571810.html

延伸阅读
循环(Loop)是现代浏览器中HTML5视频标签下的布尔属性,包括IE9在内的主流浏览器都支持这一属性。它能让一个或者一系列视频短片循环播放。开发者社区中,网页设计师非常青睐这一功能,并且截至目前影响了许多项目,让网站看起来更加绚丽和精彩。 从作品展示类的网站到移动端的专题页,循环视频背景的运用范畴非常广泛。网页开发者们将5~10的视...
Do Cage Pulse Hipstamatic Square Rivers & Robots Humaan Givers Daniel Filler HappyTables NOE Interactive Découvrez uOttawa Stieler WthrApp Site 2 WordPress Mambo Industries turningArt
好的网站设计不仅仅让客户满意,更重要的是让游览者心动。那是一种一瞬间的感触,无需要思考。优秀的网页多种多样,有很多种方法去创意出一个华丽的网站。今天我们要分享的是一些使用了大背景图片的网站创意。很多时候我们的千言万语抵不过一张简单甚至低俗的图片。随着网页技术的发展和网速的提升。很多之前的设想和设想之后的顾虑都不再担心...
纹理设计使用范围很广,比如建筑行业、服饰行业、工业产品等等,都喜欢使用纹理来美化作品,然而我们在网页设计或是ui设计上都可以配合纹理素材来设计,只要使用得当,我们的界面就会变得更加漂亮,也容易吸引用户眼球了。 下面我们整理20个使用细微纹理素材的网页设计,这些网页使用的纹理比较微妙,不是很粗糙哪种,这样网页看起来既漂亮也...
如果一个网站想某些地方吸引访客的眼球,可以通过很多方式,比如放到网站的banner上,或是为内容添加特别的排版和高亮的颜色,然而除了这些还有个更吸引用户眼球的方法,就是使用视差滚动效果了。 Rimmel London Pressels Poppy Spend HotDot TEDxGUC Costa Flat vs Realism Teapot Creation NASA Prospect ...

经验教程

42

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部