说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

开源jQuery插件推荐 帮你快速构建单页网站

HTML文档下载 WORD文档下载 PDF文档下载
单页网站将成为网站设计的主要趋势之一。其将设计元素减为最少,将访问者关心的核心内容放在最显眼位置,提高了网站效率。有一些jQuery插件可大大提高单页网站的开发效率,如Single Page Nav、Ascensor.js等。

单一页面网站(单一页面网站设计)是现代网站设计的主要趋势之一。单一页面网站布局将导航、设计元素减为最少,专注于访问者所关心的网站内容。此外,它还显著提高了网站的效率,允许你将核心内容放在最显眼位置。因为脚本技术(如Ajax和jQuery)已十分稳定、成熟且广泛应用,单一页面网站的开发已变得十分简单。

本文将列举一些此类的工具与插件,你可以利用它们开发出漂亮的单一页面网站。

jQuery Scroll Path


演示Demo  |  GitHub下载地址

jQuery Scroll Path为jQuery滚动路径插件,可以让你自定义滚动路径。这是一个非常新颖的插件。借助它,你可以绘制出任何尺寸的滚动路径(利用curves)。HTML元素沿路径进行布局。可通过鼠标滚轮的上下滚动,向上/下光标键及空格键,来动画显示路径中的每个元素。

此外,它还包含一个定制的滚动条,可通过单击与拖拽实现滚动。同时,该插件利用CSS转换(CSS Transform)实现了整个页面的旋转。

Ascensor.js


演示Demo  |  GitHub下载地址

Ascensor所实现的效果十分新颖,你可以用四个方向键来控制网页内容的移动。构建该插件,主要为了实现在同一页面Div元素之间产生视觉错位幻灯效果。Ascensor利用页面一角的小导航系统可对页面进行水平与垂直方向的滚动。这是比其他插件独特的地方。如果该类型插件适合你的网站,那它将是一个非常不错的选择。此插件可定制性很高,可以设定是否启用方向键控制,是否显示导航等等。

jQuery Waypoints


演示Demo  |  GitHub下载地址

jQuery Waypoints是用来实现捕获各种滚动事件的插件,例如实现无翻页的内容浏览、固定某个元素不让滚动等等。当用户将页面滚动到某一部分时,开发者可以利用Waypoints来触发某些事件。页面可垂直与水平方向滚动,并带来视差效果。Waypoints带有很多高级功能特性,尤其适合于单一页面网站布局。Waypoints并非一体化的解决方案,但它可给正在寻找单一页面网站开发资源的开发者带来便利。

Cool Kitten


演示Demo  |  GitHub下载地址

Cool Kitten 是一个具备视差滚动特效的开源响应式框架,由Jalxob编写,为Github上的开源项目。该插件实现了网站在智能手机、平板、电脑上的响应式显示,支持视差滚动(Parallax Scrolling)特效,给网站带来绚丽的视觉效果。它多被描述为包含大量HTML/CSS(像Normalize.css)资源的框架。

Curtain.js


演示Demo  | GitHub下载地址

这个插件允许你创建一个包含多个固定块的网页,并实现了有趣的展开效果,酷似帷幕上升。虽然Curtain.js现在已经停止维护,但它仍为构建单一页面布局提供了良好的开始。每个面板被横向分隔开,当用户向下滚动页面时,下面的面板如揭幕般展示出来。

SMINT


演示Demo  |  下载地址

该jQuery插件更加简单,同时也支持自然的滑动效果。SMINT代表“Sticky Menu Including Navigation Thingy”。视差滚动效果是它的另一特点,将导航菜单固定在页面顶部十分有利于界面设计。SMINT插件还提供了十分精彩的文档,为开发者提供了大量的定制功能。

Skrollr


演示Demo  |  GitHub下载地址

Skrollr是另一款单页面视差滚动JavaScript框架。开发者可利用CSS3转换(CSS3 Transition)、jQuery Easing函数为新元素定义动画。它是不依赖于其它框架的独立类库,可帮你快速打造视差滚动效果。它可以给任意元素设置关键帧的CSS属性,并自动形成动画效果。更重要的一点是,使用此类库时不用写复杂的JavaScript代码,对于那些不太熟悉JavaScript的设计师来说是个极大的便利。该库经Gzip 压缩后只有3KB。

Single Page Nav


演示Demo  |  GitHub下载地址

Single Page Nav允许你创建固定位置的导航面板,同时可高亮显示当前处于活动状态的菜单项。其代码文档简单明了,所有功能均构建于jQuery Easing函数之上。强烈推荐大家使用。

jQuery One Page Nav


GitHub下载地址

该插件与Single Page Nav十分相似,虽然它发布在先。相比之下,该脚本更加简单明了,对于那些喜欢从简单入手的开发者来说,这是一个很好的选择。jQuery One Page Nav同样支持固定位置的导航及高亮显示当前选择的表单项。如果你在使用Single Page Nav的过程中遇到了困难,可以尝试一下jQuery One Page Nav。

jQuery Parallax


演示Demo  |  GitHub下载地址

jQuery Parallax用来创建包含不同内容、垂直滚动的面板。如果希望展示特定类型的数据、图片,该插件将十分有用。该Demo用包含不同背景的文字块来区分不同的内容部分。jQuery Parallax可用来构建垂直滚动、具有相似设计风格的Web页面。如何独自设计出如此风格的网站,开发者Ian Lunn提供了一个简单的教程。

Single.js


GitHub下载地址

Single.js与jQuery Parallax有相似之处,同时还具有自己的特性。利用它,你可以构建向前/向后链接,从而在不同的内容面板间进行切换。为了满足响应式设计布局与Retina设备,该插件还支持可改变大小的图片。该插件还没有Demo可观察,你可以从Github中下载源代码,自己运行观看一下。Single.js是构建包含不同内容模块、垂直滚动页面的另一不错的选择。

JustaPage


演示Demo

JustaPage已超出了插件范畴,它是设计单一页面网站的模板。该模板具有跨浏览器特性,同时对移动友好。

jQuery.SnapScroll


演示Demo  |  GitHub下载地址

该插件虽然不提供完全的视差滚动效果,但如果你的设计专注于垂直展示的内容,它就有用。当用户向下滚动页面时,SnapScroll可自动将接下来要展示的内容块自动提升到屏幕最上端。你需要自己设计所有的内容部分,利用CSS来设计样式以适应屏幕的尺寸。在设计移动应用时,如果内容通过自动锁定特性(auto-locking feature)被突出显示时,SnapScroll是最合适的选择。

jQuery. ScrollTo


GitHub下载地址

利用该插件,你可以很容易地滚动溢出元素和屏幕本身。它给了开发者很多不同的定制选择,并提供了各种滚动方法。(编译:陈秋歌 审校:张红月)

原文链接:Open Source jQuery Plugins for Building Single-Page Website Layouts

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘