Creating a Single-page website is becoming the latest trend which is being widely adapted by many website owners lately. Single Page websites are being used by freelancers, companies, and standalone projects, which require a representative space by which to present their information to the online masses. Single-page design is easy to create and can be done without possessing knowledge of any front-end designing tools or programming skills.
The benefits of a Single Page website are that â they can easily been adapted to mobile devices, are less costly over what one would normally pay for an entire website and â are easier to create since all they really depend on is vertical or horizontal scrolling, and parallax effects.Incorporating a sliding parallax effect by adding animation into a website, one is able to a create unique experience for the end-user. Albeit, a parallax interface can be hard coded from the ground up â however, there are several free open-source plugins which will enable you to get the job done much quicker and easier.
There are several jQuery plugins which are open source and available to assist you in this undertaking, and they offer many features in terms of fixed navigation menus, parallax content, animations as well as other advanced features.
Several of these plugins are available for free and can be implemented quickly and easily onto any type of platform. We will review 15 of the most popular and feature-rich open source jQuery plugins which can be used in creating a single-page website.
What is your favorite JQuery plugin in creating a Single Page Website?
Do you have a favorite Single Page Website you would like to share with our readers?
If so â please use the comment form and leave us your Feedback.
Enjoy
1. Smint
Smint is a simple jQuery plugin that helps with the navigation on one page style websites. It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.
SMINT is a simple plugin, so only has an option for how fast the page scrolls. The default speed is 500 (half a second) but you can now set that to be whatever you like. The download comes with demo included so feel free to use that as a staring template for your own one page website.
2. qpScroll
qpScroll is a jQuery plugin that creates a parallax background for any page or div. It is simple to setup. It can be added to any existing page without the need to change the HTML mark up.
3. Stickup
Stickup is a simple jQuery plugin that âsticksâ an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.
Although stickUp was made to work on any kind of website, it was originally designed for the âone-pagerâ style of websites. By using CSS the sticky navigation menu item will be highlighted as itâs correlating content is scrolled in and out of view.
4. jQuery Scroll Path
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initiating the plugin. jQuery Scroll Path also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.
5. Ascensor.js
Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system. The sections are browsed like an elevator system which can go up/down and right/left.
6. jQuery Fracs
jQuery.fracs determines the fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible. It also provides the coordinates of the visible rectangle in document, element and viewport space. It makes users easier to jump to different sections of your website. It is very suitable for one-page website or website with a lot of scrolling. jQuery.fracs is provided under the terms of the MIT License.
7. jQuery One Page Navigation Plugin
When appropriate, Trevor Davis really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Thatâs why he wrote jQuery One Page Navigation Plugin.
8. Fullpage.js
FullPage.js is a simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites). It enables you to create fullscren scrolling websites as well as adding some landscape sliders inside the sections of the site. It is designed to fit to different screen sizes as well as tablet and mobile devices.
9. One Page Scroll
One Page Scroll let you transform your website into a one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers. For example, Appleâs iPhone 5S website uses the same technique. You can customize the animation timing, the selector or even the animation easing using CSS3. Donât forget to grab them for free on Github. Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested.
10. Scroll Deck
A jQuery plugin for making scrolling presentation decks.
11. Full Paged
Full Paged allows you to create single paged layouts with a few optional custom UI elements such as fold up menus. Check out the demo and enjoy!
12. Curtain.js
This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises. To navigate, you can use your keyboard instead the scrollbar or mousewheel to navigate into the document. But thatâs not all, there is more features! For example, you can easily add a fixed element or multiple âstepsâ element inside a panel.
13. Pagify.js
This jQuery plugin is specifically created for single-page websites. It works by creating the contents of each menu as separate HTML files and loads those HTML files inside a defined div once a menu item is clicked.
14. Single Page Nav
jQuery plugin that provides smooth scrolling and advanced navigation for single page websites.
15. Single.js
SingleJS is a jQuery plugin that makes it easy to create websites with single-page scroll.
Fonte:Â http://codegeekz.com/best-jquery-plugins-for-creating-single-page-websites/