单一页面网站(单一页面网站设计)是现代网站设计的主要趋势之一。单一页面网站布局将导航、设计元素减为最少,专注于访问者所关心的网站内容。此外,它还显著提高了网站的效率,允许你将核心内容放在最显眼位置。因为脚本技术(如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