用于构建单页网站布局的开源jQuery插件

jopen 10年前

单页网站（单页网站设计）是在现代网站设计的主要趋势之一。单页布局最大限度地减少导航和设计元素，让游客可以关注网站的重点内容。

jQuery Scroll Path

That’s a very original plugin which allows us to draw a totally custom scroll path (with curves) of any size. HTML elements can be placed along the path and events like mousewheel, up/down arrow keys or spacebar will get you to the next element with an animation that follows the path.

An optional custom scrollbar is included which allows click and drag scrolling. Also, the plugin allows rotating the entire page using CSS transforms.

Ascensor.js

Now this plugin is somewhat different from the other solutions. It is built for parallax sliding effects between div elements fixed on the same page. Ascensor can scroll vertically and horizontally using a small navigation system in the corner of the page. This is certainly more unique than other plugins – but if this style can fit your website then it is a wonderful choice.

jQuery Waypoints

The Waypoints plugin has gotten some notoriety because it can be included as a resource along with other plugins. Waypoints can allow developers to run functions once a user scrolls into a section of the page. This could be vertical or horizontal scrolling with parallax features. But Waypoints is fantastic to use in single-page website layouts because of the many advanced features. Take a peek at the demo examples page to see a small sample of what is possible. Waypoints is not some all-in-one solution but it can provide benefit those seeking out single-page development resources.

Cool Kitten

This open source parallax solution has almost everything you need for a complete parallax website. The plugin allows for responsive layouts on smartphones and tablets, along with full-screen desktop monitors. It is described as more of a framework containing other HTML/CSS resources like Normalize.css.

Curtain.js

Although Curtain.js is no longer a currently maintained plugin, it still provides a nice starting point for building single-page layouts. Each panel is split horizontally and will unveil beneath the current panel as the user scrolls down the page. It almost seems like a curtain is rising to show the next panel, although this content is all located in the same HTML file.

SMINT

I really love SMINT because it is one of the simpler single-page website jQuery plugins which also supports natural sliding effects. The name stands for “Sticky Menu Including Navigation Thingy” which is another quick way to describe a single-page website. The parallax scrolling is an added benefit and keeping the navigation menu fixed at the top is beneficial to the interface design. The SMINT plugin has fantastic documentation and it provides a lot more customization for developers.

Skrollr

Here is another single-page parallax style plugin which provides a very simple foundation. You can animate new elements into the page with CSS3 transitions or jQuery easing functions. The demo is very impressive once you scroll through all of the panels. It will require a lot more development work to get this designed exactly as you’d like.

Single Page Nav

I will highly recommend this plugin as a framework to build any single-page website. Single Page Nav allows you to create a fixed navigation panel which also highlights the currently active menu item. Check out the plugin’s live demo page to see what I mean. All the code documentation is straightforward and it’s built on top of jQuery easing functions.

jQuery One Page Nav

This plugin is very similar to Single Page Nav although it was released beforehand. The script is a lot more “bare” in comparison which is great for developers who want something clean to start with. I really like jQuery One Page Nav because it also supports a fixed navigation with a highlighting class for the currently selected menu item. You can see how it works on this sample demo page and download a local copy from Github. If you are having trouble working with Single Page Nav then give this plugin a try instead!

jQuery Parallax

For those who need something a bit different, jQuery Parallax is used for creating vertical sliding panels with different content. This parallax effect is really useful when displaying certain types of data or images. The demo page utilizes various background textures to distinguish between content sections. I would recommend this to anyone who needs a similar design style for building a vertical sliding webpage. The developer Ian Lunn also put up a brief tutorial about how to create this effect yourself.

Single.js

Single.js is very similar to jQuery Parallax but it has some different options. You can build forward/back links which automatically move between content panels. Additionally the plugin supports auto-resizing images for responsive layouts and retina devices. There is no online demo but you can download a copy from Github and check out the demo inside. Single.js is another great choice for building a vertical website layout with scrolling content sections.

Scrollrama

JustaPage

JustaPage is more than a plugin but a template for designing one-page websites. The template works cross-browser and it is mobile-friendly.

jQuery.SnapScroll

Although this plugin doesn’t provide full parallax functionality, it is useful if you have a design focused on vertical content. SnapScroll will automatically snap the page onto various content sections as the user scrolls down. The live demo is a great way to understand how this works. You will need to design the full content sections yourself and style with CSS to fit the screen height. But SnapScroll can be most helpful in mobile webapps where the content may be enhanced with an auto-locking feature.

jQuery. ScrollTo

With this plugin, you will easily scroll overflowed elements, and the screen itself. It gives you access to many different options to customize and various ways to specify where to scroll.