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


Demo Download

ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages.

As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required.


2 – ScrollDeck


Demo Download

A jQuery plugin for making scrolling presentation decks.


3 – multiScroll-js


Demo Download

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


Demo Download

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


Demo Download

Stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in about 12k minified.

Designer friendly. No JavaScript skills needed. Just plain CSS and HTML.

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


Demo Download

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


Demo Download

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


Demo Download

Scrolly is a super simple jquery parallax plugin.
Created by Victor Coulon


9 – ascensor.js


Demo Download

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


Demo Download

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


Demo Download

Jarallax is an open-source javascript library which makes adjusting css based on interaction easy.
With Jarallax it’s easy to create a parallax scrolling website.


12 – Full Paged


Demo Download

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


Demo Download

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


Demo Download

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


Demo Download

pagePiling.js is a jQuery plugin to create a scrolling pile of sections for your website

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *