单一页面网站(单一页面网站设计)是现代网站设计的主要趋势之一。单一页面网站布局将导航、设计元素减为最少,专注于访问者所关心的网站内容。此 外,它还显著提高了网站的效率,允许你将核心内容放在最显眼位置。因为脚本技术(如Ajax和jQuery)已十分稳定、成熟且广泛应用,单一页面网站的 开发已变得十分简单。
本文将列举一些此类的工具与插件,你可以利用它们开发出漂亮的单一页面网站。
jQuery Scroll Path
jQuery Scroll Path为jQuery滚动路径插件,可以让你自定义滚动路径。这是一个非常新颖的插件。借助它,你可以绘制出任何尺寸的滚动路径(利用curves)。 HTML元素沿路径进行布局。可通过鼠标滚轮的上下滚动,向上/下光标键及空格键,来动画显示路径中的每个元素。
此外,它还包含一个定制的滚动条,可通过单击与拖拽实现滚动。同时,该插件利用CSS转换(CSS Transform)实现了整个页面的旋转。
Ascensor.js
Ascensor 所实现的效果十分新颖,你可以用四个方向键来控制网页内容的移动。构建该插件,主要为了实现在同一页面Div元素之间产生视觉错位幻灯效果。 Ascensor利用页面一角的小导航系统可对页面进行水平与垂直方向的滚动。这是比其他插件独特的地方。如果该类型插件适合你的网站,那它将是一个非常 不错的选择。此插件可定制性很高,可以设定是否启用方向键控制,是否显示导航等等。
jQuery Waypoints
jQuery Waypoints是用来实现捕获各种滚动事件的插件,例如实现无翻页的内容浏览、固定某个元素不让滚动等等。当用户将页面滚动到某一部分时,开发者可以 利用Waypoints来触发某些事件。页面可垂直与水平方向滚动,并带来视差效果。Waypoints带有很多高级功能特性,尤其适合于单一页面网站布 局。Waypoints并非一体化的解决方案,但它可给正在寻找单一页面网站开发资源的开发者带来便利。
Cool Kitten
Cool Kitten 是一个具备视差滚动特效的开源响应式框架,由Jalxob编写,为Github上的开源项目。该插件实现了网站在智能手机、平板、电脑上的响应式显示,支 持视差滚动(Parallax Scrolling)特效,给网站带来绚丽的视觉效果。它多被描述为包含大量HTML/CSS(像Normalize.css)资源的框架。
Curtain.js
这个插件允许你创建一个包含多个固定块的网页,并实现了有趣的展开效果,酷似帷幕上升。虽然Curtain.js现在已经停止维护,但它仍为构建单一页面布局提供了良好的开始。每个面板被横向分隔开,当用户向下滚动页面时,下面的面板如揭幕般展示出来。
SMINT
该 jQuery插件更加简单,同时也支持自然的滑动效果。SMINT代表“Sticky Menu Including Navigation Thingy”。视差滚动效果是它的另一特点,将导航菜单固定在页面顶部十分有利于界面设计。SMINT插件还提供了十分精彩的文档,为开发者提供了大量 的定制功能。
Skrollr
Skrollr 是另一款单页面视差滚动JavaScript框架。开发者可利用CSS3转换(CSS3 Transition)、jQuery Easing函数为新元素定义动画。它是不依赖于其它框架的独立类库,可帮你快速打造视差滚动效果。它可以给任意元素设置关键帧的CSS属性,并自动形成 动画效果。更重要的一点是,使用此类库时不用写复杂的JavaScript代码,对于那些不太熟悉JavaScript的设计师来说是个极大的便利。该库 经Gzip 压缩后只有3KB。
Single Page Nav
Single Page Nav允许你创建固定位置的导航面板,同时可高亮显示当前处于活动状态的菜单项。其代码文档简单明了,所有功能均构建于jQuery Easing函数之上。强烈推荐大家使用。
jQuery One Page Nav
该 插件与Single Page Nav十分相似,虽然它发布在先。相比之下,该脚本更加简单明了,对于那些喜欢从简单入手的开发者来说,这是一个很好的选择。jQuery One Page Nav同样支持固定位置的导航及高亮显示当前选择的表单项。如果你在使用Single Page Nav的过程中遇到了困难,可以尝试一下jQuery One Page Nav。
jQuery Parallax
jQuery Parallax用来创建包含不同内容、垂直滚动的面板。如果希望展示特定类型的数据、图片,该插件将十分有用。该Demo用包含不同背景的文字块来区分不同的内容部分。jQuery Parallax可用来构建垂直滚动、具有相似设计风格的Web页面。如何独自设计出如此风格的网站,开发者Ian Lunn提供了一个简单的教程。
Single.js
Single.js 与jQuery Parallax有相似之处,同时还具有自己的特性。利用它,你可以构建向前/向后链接,从而在不同的内容面板间进行切换。为了满足响应式设计布局与 Retina设备,该插件还支持可改变大小的图片。该插件还没有Demo可观察,你可以从Github中下载源代码,自己运行观看一下。Single.js是构建包含不同内容模块、垂直滚动页面的另一不错的选择。
JustaPage
JustaPage已超出了插件范畴,它是设计单一页面网站的模板。该模板具有跨浏览器特性,同时对移动友好。
jQuery.SnapScroll
该 插件虽然不提供完全的视差滚动效果,但如果你的设计专注于垂直展示的内容,它就有用。当用户向下滚动页面时,SnapScroll可自动将接下来要展示的 内容块自动提升到屏幕最上端。你需要自己设计所有的内容部分,利用CSS来设计样式以适应屏幕的尺寸。在设计移动应用时,如果内容通过自动锁定特性 (auto-locking feature)被突出显示时,SnapScroll是最合适的选择。
jQuery. ScrollTo
利用该插件,你可以很容易地滚动溢出元素和屏幕本身。它给了开发者很多不同的定制选择,并提供了各种滚动方法。