15 JQuery Plugin One Page Scroll With Animations
Creating a Single-page website is becoming the latest trend which is being widely adapted by many website owners lately. The benefits of a Single Page website are that they displays all the essential features of your website on the home page, makes easy for the users to get all the required information within a single page.
There are several jQuery plugins which will enable you to create single page website much quicker and easier. They offer many features in terms of parallax content, animations, scale, rotate, translate, change opacity of elements on the page as well as other advanced features.
Bellow are 15 of the most popular and feature-rich open source jQuery plugins which can be used in creating a single-page website.
1 – ScrollMe
ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages.
2 – ScrollDeck
A jQuery plugin for making scrolling presentation decks.
3 – multiScroll-js
multiScroll-js is a simple jQuery plugin to create multi scrolling websites with two vertical scrolling panels.
This plugin is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 8, 9, Opera 12… It works with browsers with CSS3 support and with the ones who don’t have it, making it ideal for old browsers compatibility. It is designed to work as well on touch devices such as mobile phones or tablets.
4 – ScrollMagic
ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a progress bar to produce magical scroll effects.
It’s the plugin for you, if you want to …
- … start an animation at a specific scroll position.
- … synchronize an animation to the scrollbar movement.
- … pin an element at a specific scroll position (sticky elements).
- … pin an element for a limited amount of scroll progress (sticky elements).
- … easily add a parallax effect to your website.
- … create an inifinitely scrolling page (ajax load of additional content).
- … call functions when the user hits certain scroll positions or react in any other way to the current scroll position.
5 – skrollr
Actually, skrollr is much more than “just” parallax scrolling. It’s a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3 😉
6 – Parallax Image Scroll
Parallax Image Scroll is a JQuery and amd compatible plugin to create a parallax effect with images that is heavily inspired by the spotify.com website.
The plugin is really simple to use with some options to tweek. It makes use of css3 transform for animation where supported and falls back to top and left positioning for ancient browsers.
7 – 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.
It’s compatibility with modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Should work fine on IE8 and IE9 as well.
8 – Scrolly
Scrolly is a super simple jquery parallax plugin.
Created by Victor Coulon
9 – ascensor.js
Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system. It work with jquery >= 1.7.
This plugin is entirely free to use, but you’re always welcome to pay me a beer
10 – JinvertScroll
It’s a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down.
It’s extremely easy to setup and requires nearly no configuration.
11 – Jarallax
With Jarallax it’s easy to create a parallax scrolling website.
12 – 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!
13 – Block Scroll
Block scroll is a jQuery plugin that turns a set of <div> elements into a blocks and displays them one screen at a time. The idea is to break up your page into chunks for better presentation and user-flow. Block Scroll automatically turns your page responsive.
14 – jQuery Scroll Path
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. 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 initializing the plugin.
Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.
The plugin 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.
15 – pagePiling.js
pagePiling.js is a jQuery plugin to create a scrolling pile of sections for your website