W Design & NEWS

滚动的网站的兴起

W-design2015.06.06

在短短的10年里,互联网已经从收集原始信息网站发展,以互动体验的广阔天地,巨大的社会网络,复杂数据的可视化,应用程序和工具。它已成为我们生活的很大一部分,因此我们塑造它适应我们不断变化的需求。本文将探讨滚动部位出现:它是什么以及它是如何来到一个展示的内容在网络上最流行的和有效的方法。

早期

早期的Web的景观是一个贫瘠的地方:网站是静态的,简单的和主要的信息。这种早期的和黑暗的过去的一部分今天仍然活着:

滚动的网站的兴起。早期的网站是空的早期遗址是空的

滚动的网站的兴起

这些网站作为一个提醒什么的Web应用是:收藏为主的文本页面,串成的超链接。

随着时间的推移,更快的网络连接和更强大的计算机可以使用了;新技术的出现;Flash允许设计人员和开发人员创建交互式和审美的复杂性,是不可能在网站测试。动画,声音,视频……Flash网站开始寻找,像视频游戏,这样,Flash网站主要是一个全屏体验。内容定位在屏幕上,和层次的规模和运动的确定。

吉姆的个人网站

吉姆的个人网站是很喜欢他的表演风格:在上面

用于创建高度互动和参与体验Flash实例

用于创建高度互动和参与体验Flash实例

滚动的部位出现

在我们继续之前,让我们花一秒钟定义区别全屏滚动网站。全屏网站旨在显示所有的内容,上面的“折”。倍,在世界上的网页设计,是屏幕的底部。在某种程度上,这种布局与传统打印喜欢的书或杂志,内容放在一个固定的区域和某些种类的转换需要导航网站的内容(比如翻页)。然而与滚动的网站,内容不再受限于屏幕的高度,相反它溢出垂直滚动和最。

全屏网站旨在显示所有的内容,上面的“折”

用滚动的网站,内容溢出垂直。

用滚动的网站,内容溢出垂直

动态网页

早期的网站主要是静态网站上的内容很少会改变,如果它会策划的变化:通过网站或网站管理员的主人。Web 2是描述为协作网络。博客平台,社交网络,在线报纸……这些都是动态网站,用户生成内容为王。提供一个酷的互动体验- Flash网站是伟大的但他们挣扎在处理动态内容,即堆叠垂直比成全屏体验将更容易。因此他们几乎都是清一色的滚动位置。

Tumblr是一个使用滚动显示动态用户生成内容的例子

Tumblr是一个使用滚动显示动态用户生成内容的例子

在线报纸使用滚动格式容纳可变长度的文章

在线报纸使用滚动格式容纳可变长度的文章

智能手机

智能手机(尤其是iPhone)永久地改变了我们的互动网络。首次有人访问Web所到之处:等候公共汽车,走在街上,坐在马桶上……触摸屏的iPhone是一个技术奇迹,但它没有发挥好与全屏体验。除非你有一个年轻的孩子的纤巧的手指,它可以是非常令人沮丧的导航复杂的全屏体验。这,结合垂直滑动触摸屏上的自然姿态,使滚动的网站一个伟大的解决方案,在移动设备上显示的内容。

滚动的网站,与垂直堆叠的内容,以及在移动设备上玩

滚动的网站,与垂直堆叠的内容,以及在移动设备上玩

浏览器大小

直到不久前,大多数浏览器都落在一个很窄的数组大小。你可以设计一个800x600监控现场,并且是相对肯定会看起来一样在大多数电脑。在今天的生态系统,然而,这已不再是这样的:浏览器大小的范围:从爆炸的惊人宽很小。任何Web开发人员会告诉你,这是很好的编码像素完美全屏网站给出的一个固定的浏览器的大小,但当浏览器的宽度和高度开始走动,它会很快成为确保内容看起来好全线的噩梦。滚动的网站内容,通过堆叠垂直允许网站有高度可变的,在很大程度上解决了这一问题。

滚动的网站很容易在各种浏览器的大小作出响应。

滚动的网站很容易在各种浏览器的大小作出响应。

在全屏网站最后一点

全屏网站是远离死亡。每一天,难以置信的全屏网站出现:美丽的摄影组合,丰富的帆布的可视化,身临其境的互动视频活动,切削刃的WebGL的经验……这些网站在技术上和视觉上令人震惊的和正在推的Web浏览器的可能性边界。

云在古巴是一个非常有趣的全屏体验

云在古巴是一个非常有趣的全屏体验

快乐的24个小时是一个全屏的经验,把网络技术和视频互动的界限

快乐的24个小时是一个全屏的经验,把网络技术和视频互动的界限

然而,这些网站的内容主要是静态的,通常含有很少的文字,很少是优化的移动。在这些地区,全屏网站失败,滚动网站擅长。

新的滚动的网站

如果你观察网络景观今天你会发现滚动的网站已经成为动态和编辑内容的新规范。当我们深入探讨以上,它的格式是有意义的。但更重要的是,一系列新的和改进的Web技术已经在过去的几年里已让滚动网站功能不只是出现,但也很酷。更快的JavaScript编写更强大和灵活的CSS允许开发者利用滚动的网站结构,并注入新的生命,创造了一种滚动的网站类固醇。

种苗是一个美丽的滚动的网站,充分利用现代网络技术

种苗是一个美丽的滚动的网站,充分利用现代网络技术

NASA的项目是一个高度互动和参与滚动的网站,有很多有趣的动画SVG图形

NASA的项目是一个高度互动和参与滚动的网站,有很多有趣的动画SVG图形

制作滚动网站酷

一个现代的滚动网站的基础是利用滚动事件的能力。一个可以用此方式来触发不同的结局。这可能是初始化一个SVG动画,播放嵌入的全屏视频,或激活一个CSS效果。

Ustream的2013互动回顾了大量使用CSS动画触发滚动

Ustream的2013互动回顾了大量使用CSS动画触发滚动

视差

视差时,页面上的元素是直接按比例与滚动运动。当不同层次的页面上以不同的速度移动,这个漂亮的技巧创造一种深度,可以很有效的。

这种滚动采访丹尼布朗充满了凉爽的视差

这种滚动采访丹尼布朗充满了凉爽的视差

杂种

全屏网站是美丽的,身临其境的,但是,正如上面提到的,可以不在显示长表和动态内容。在这些情况下,全屏/滚动混合场地可以有效。我们都是视觉动物(它)是一个博客,我创建了展示新兴的视觉创意,并使用这种混合格式。全屏体验允许用户浏览各种艺人访谈,但可以打开成一个滚动查看更详细的探讨艺术家的作品。

它改变了全屏视图和滚动视图详细探讨艺术家之间

它改变了全屏视图和滚动视图详细探讨艺术家之间

它改变了全屏视图和滚动视图详细探讨艺术家之间

它改变了全屏视图和滚动视图详细探讨艺术家之间

滚动的故事

滚动的网站在讲故事,因为他们允许内容的不间断的流动是很大的。但没有什么比一个更吓人的和令人沮丧的长文本页面。但结合文本,图像,动画和交互性,你可以创建一个真正令人信服的经验。

被遗忘的旅途是互动讲故事的大师,使滚动的格式非常有用

被遗忘的旅途是互动讲故事的大师,使滚动的格式非常有用

雪是一个获得普利策奖的互动的文章发表在纽约时报,这彻底改变了我们思考的互动新闻发布的方式。

雪是一个获得普利策奖的互动的文章发表在纽约时报,这彻底改变了我们思考的互动新闻发布的方式。

结论

用滚动的网站成为他们今天的短时间;而智能手机的广泛应用和网络的动态内容的爆炸创造了一个新的方式来浏览需要。因为我们都是视觉动物,我们很快就把这一内容的生活生产方式和美丽的新方法。


W design values every chance to work with you.