站点设计至尊 (展示文)
30个酷毙的交互式站点,原文地址:
http://webdesignerwall.com/trends/30-great-interactive-sites
我非常抱歉非常久没更新这个站点了。但不要操心,我还活着(在忙另外一个站点)。
今天我有个非常帅的主题要分享 — 30个酷毙的站点。
HTML5,CSS3。还有Javascript 让非常多绚丽的设计效果得以展示。如今的网页设计是能够非常有交互性的,已经不再被静态布局给限制住了。以下列出的这30个站点就是个非常不错的证明。它通过诸如音频和视频让传统效果变得酷炫。開始赞赏吧!
(译者注:最好备用多种浏览器来訪问)
01 Bienville Capital Management
http://www.bienvillecapital.com/
这个站点使用了页面无缝过渡效果。点击那些网页你就会发现跳转到别的网页基本是没有停顿的,由于网页通过褪色和滑行动画使得切换效果非常流畅。
02 Tool of North America
http://toolofna.com/
第一眼看到这个站点就认为太像一个Flash站点了,但它确实是仅仅由HTML5,CSS3和Javascript来实现的,并且动画效果超级平滑。由于使用了Ajax(对SEO一点都不友好),所以内容部分不能被搜索引擎索引到。假设你的浏览器不支持Javascript,就会仅仅出现一个黑色页面。
虽然这样的模式对SEO(译者注:搜索引擎排名技术)不友好,但它的交互效果太棒了,并且在手机浏览器的表现效果的是非常美丽的。
03 Whiteboard
http://whiteboard.is/
这个站点有着极好的背景模糊效果。
亲眼看下:当浏览器分辨率较低(或在手机设备),背景会有模糊效果,否则就是一组动画效果。
04 Cyclemon
http://cyclemon.com/ (译者注:打不开~)
简单美丽的滚动插图效果。
05 Mahedine Yahia
http://www.mahedineyahia.fr/
基本的背景动画由191张图片组成。当你浏览器往下滚动时就能看到独帧动画效果了。
06 Life of Pi
http://journey.lifeofpimovie.com/
在这个站点浏览有更高水平的滚动独帧动画效果。假设你喜欢电影,那你会非常喜欢拖动这个站点的滚动条的。它使用独帧动画展示了变幻的背景材质,实现这个惊人的效果值须要用Javascript和CSS3来控制近100张图片。
07 Teehan+Lax
http://www.teehanlax.com/
.这个站点精心处理了每个细节美丽地展示了每个故事。内容有着非常好的排版和动画效果。但你也非常可能没主要到这些细节:当你浏览到网页中间部分,突然想回到顶部菜单条,这时往上滚动鼠标,顶部的导航栏就会出现了。
这个逻辑非常有道理的,想一想。当你鼠标往下滚动时。你是想继续往下阅读,所以不须要导航栏以免挡住一些阅读区域。当你鼠标往上滚动时,导航栏就自己主动出现由于你可能想到网页顶部找导航栏跳转到其他页面。
08 Coffee Surfing illy
http://coffeesurfing.illy.com/wps/wcm/connect/cs_en/home
这个网页或许没有第一个介绍的那个站点那样好的无缝效果。但页面切换效果非常有趣。当你滚动鼠标时,页面左右区域会向不同方向切换。
09 Satorisan
http://satorisan.com/
这个站点针对购物商店进行设计。基本的商品页面同意你在一个列表中浏览所以的产品,点击不论什么产品会以美丽的视差滚动效果跳转到产品详情页面。
10 Wink TTD
http://winkttd.es/
这个站点在响应和交互方面表现得非常棒。
当你用不同的设备比方非常大个的iMac或者非常小个的iPhone来訪问,页面和动画基本如一。
11 Solasie
http://www.solasie.com/en/
这个站点在交互设计方面做得非常棒。你能够非常愉快地在浏览富媒体内容(图片画廊、音乐和影视)。唯一的不足就是SEO做得不好,这个问题在Ajax输出内容的网页是非常普遍的,但他们通常是通过提供带关键词的链接来分享这些网页。
12 REI 1440 Project
http://www.rei1440project.com/
这个站点使用时间线非常适合地表现他们的观念:“一分分钟”组成了24小时。你能够使用方向键浏览那些时间点,点击进入,你会发现效果做得非常棒。
13 Sketchin
http://www.sketchin.ch/en/
隐藏在导航菜单的文本是这个站点的一个亮点。
14 Anonymous
http://weareanonymous.fr/
这个站点布局有非常好的设计,并且提供了不错的资源(隐藏在可爱的脸蛋后面)
15 Beatbox Academy
http://www.beatboxacademy.ca/
这个站点能够用按键和鼠标来敲击不同的鼓。
它没有其他服务(你不能保存或者导出鼓声),但挺好玩的。
点击右上方的导航栏,视差滚动效果也是很棒的。
16 Quartz
http://qz.com/
这个站点把重点放在了内容部分。
它不像新闻类站点让你去点击标题然后再阅读整篇文章,而是在一个页面中展示了全部内容。
当你滚动左側的标题栏目。内容会自己主动预读。点击之后。地址栏也会自己主动更新方面分享文章。手机流量能够有同样的体验。
17 Evans Halshaw - Bond Cars
http://www.evanshalshaw.com/bondcars/
假设你是视差滚动效果爱好者。那这个站点就一定要看下。
18 Zurb Manifesto
http://zurb.com/manifesto
还有一个视差滚动效果为主的站点。
19 Peugeot Hybrid4
http://graphicnovel-hybrid4.peugeot.com/start.html
假设你认为上面介绍的视差滚动效果很酷,那你肯定还没见过这个站点 — 美丽的插图、关键帧动画、令人激动的音乐还有超强悍的切换效果。訪问这个站点可一定要开着音响!
20 Chrysler: Test of Ownership
http://testofownership.com/
这是具有优秀页面切换效果的还有一个样例。当选择不同网页的时候,页面布局、内容过渡效果都非常好,更不要说 http://testofownership.com/proof 美丽的动画。向下滚动,数字、图表会自己主动添加。向上滚动就会做出相反的动作。简单。但非常酷炫。
(译者注:临时打不开~)
21 Tinke
http://www.zensorium.com/tinke/
这个站点会演示整个产品流程给你看,可惜不是响应式的。
22 Milwaukee Police News
http://www.milwaukeepolicenews.com/
用Ajax和视差效果实现的酷炫的警察站点。
23 2am Media
http://2ammedia.co.uk/
尽管这个树枝结构的菜单看起来是Flash效果,但难以置信它是用Javascript实现的。
24 Minimal Monkey
http://minimalmonkey.com/
这是一个简单的站点,但布局、页面转换和导航都支持响应式。
25 Athenos
http://www.athenos.com/
这是一个可爱的站点并有着一系列的细节设计和切换效果,它证明了庞大的现代站点在载入时确实比較慢,由于只一个Gif图片就有2.5mb这么大,美丽程度与文件大小成正比。
26 Meng To
http://mengto.com/
这个站点用不俗的图片和突然的动画展示了美丽的作品。
27 RED
http://ff0000.com/
当你浏览站点各个地方。你会发现这个站点有着相当丰富的设计细节和动画效果。
28 Carbon Studio
http://www.carbonstudio.co.uk/
假设你错过了老式Flash能够拖控图片的时代,那你要好好赞赏这个站点。
29 Oakley Airbrake MX
http://moto.oakley.com/
这是还有一个让人疯狂的滚动视差站点,具有视觉冲击力地展示了他们的产品。
30 Nick Jones
http://www.narrowdesign.com/
这个站点或许有点过时了。但它的交互设计依旧是很棒的。
很多其它:
转载于:https://www.cnblogs.com/bhlsheji/p/5358812.html
站点设计至尊 (展示文)相关推荐
- Atitit 项目的主体设计与结构文档 v5
Atitit 项目的主体设计与结构文档 v5 1. 版本历史说明2 2. 功能大概说明2 3. 实现的目标3 3.1. cross device跨设备(pc 手机 平板)3 3.2. cross sc ...
- 车贷P2P平台设计市场需求文档(MRD)
原创推荐|车贷P2P平台设计市场需求文档(MRD) 本篇MRD继续采用PPT的方式展示出来,在大部分实际操作中,很多创业型企业或者规模比较小的企业会跳过BRD和MRD,直接从原型开始,但是如果能在空余 ...
- 研发流程:产品设计流程与文档规范
最近项目中遇到了需求.UE.UI到前端工作衔接不顺畅的问题: 前端设计之前到底需求需要分析到哪一层? 哪些文档就可以支持前端设计? 这些文档的结构和规范都是什么样的? 以及,前端设计到什么程度就可以进 ...
- App架构设计经验谈:展示层的设计
2019独角兽企业重金招聘Python工程师标准>>> App架构设计经验谈:展示层的设计 三层架构中,数据层和业务层都已经做过了简单的分享,最后,就剩下展示层了.本篇就给各位分享下 ...
- 让你的原创设计作品展示给世界
作为一枚设计师,灵感的源泉大部分是来自我们自己对别人优秀作品的欣赏.借鉴,或者来自生活中的一些美好的事物,从而激化我们的艺术细胞,作为初级设计师,我们很难在短时间内纯靠自己原创做出很好的设计,除非你真 ...
- 设计作品展示类网站,设计提升调性必不可少
作品展示类平台绝对是设计师最熟悉的类别之一,不仅仅是实际需求多,而且对设计师而言,展示作品也是常见需求. 这也是更多设计师选择集设的原因,给你一个平台让你的原创设计作品展示给世界. 集设 作为设计师的 ...
- 设计专业作品展示舞台,灵感源泉
集设网 www.ijishe.com 用作品打动世界,让你的原创设计作品展示给世界.网站聚集了设计行业大部分的专业设计师,促进设计师之间的交流. 集设专为设计师而生的设计交流平台;专注创意设计分享与设 ...
- 设计师作品交流社区,让你的原创设计作品展示给世界
集设网(www.ijishe.com )目标是让你的原创设计作品展示给世界,帮助设计师们打通信息资源的共享以及人脉获取和拓展. 社区吸引聚集了一大批优秀的网页设计师,图形设计师,插画家,图标艺术家,排 ...
- 原创设计师如何提高影响力?到集设,让你的原创设计作品展示给世界
分享开始: 把自己的作品.练习.案例发布在互联网上就是一切的开始,集设网(ijishe.com)专为设计师而生的设计交流平台;专注创意设计分享与设计技术交流,全力构建更全面的交流分享互动平台,共同寻找 ...
最新文章
- Testing for SSL renegotiation
- JVMTM Tool Interface
- 用EnumProcesses()枚举进程
- 苹果、小米、荣耀智能手环都能测卫生纸心率?网友“测遍万物”玩坏了
- (十四)函数参数和返回值
- java代码获取数据源_tomcat中获取不同的数据源java代码
- 2020年注册电气工程师基础考试大纲:公共基础(供配电、发输变电相同)
- 苹果手机怎么清理听筒灰尘_iPhone手机听筒声音小、有杂音?成都苹果维修点教你轻松解决...
- cf I - Irrational Division
- XMind8思维导图 破解版
- 字符串转换成UTF8编码
- html5 3d自动,html5 3D微信头像自动抽奖代码
- http://jingyan.baidu.com/article/d169e186aa8728436611d8f3.html
- Linux 下安装java环境
- mt7621dtsi
- Firebug初级教程
- 中考计算机考试试题2018,2017年中考信息技术试题及答案
- 百度云盘和谐下载和云播
- NodeJS C++插件开发(三) - 调试概述
- 前端大作业-Boostrap实现静态登录和后台页面