10 Best Parallax Scrolling Plugins

Apr. 9, 2015

Long scrolling sites have become a really common web design trend. One of the coolest sub-types of this are the parallax scrolling sites, where images move to give off a parallax effect. As the user scrolls down the page, the animations are triggered off and overall it gives a fresh look and feel to any website if implemented correctly.

Parallax Scrolling Plugins

Parallax Scrolling Plugins

ScrollMagic has lots ofexampleslisted. Check them out for inspiration and guidance on using this library.

About:

Homepage:http://janpaepke.github.io/ScrollMagic/

Created by:Jan Paepke

Installation:

1.CDN:

2. [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/janpaepke/ScrollMagic”]

About:

Homepage:http://prinzhorn.github.io/skrollr/

Created by:Prinzhorn

Installation: [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/Prinzhorn/skrollr”]

$(document).ready(function() {$('#pagepiling').pagepiling();});

For more advanced initializations, go through theREADME.md.

About:

Homepage:http://alvarotrigo.com/pagePiling/

Created by:alvarotrigo

Installation: [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/alvarotrigo/pagePiling.js”]

Alton is a jQuery ‘scroll-jacking to us’ plugin. Scroll jacking means that your browser’s native scroll is disabled in favor of targeted scrolling which when initiated (by your mouse wheel or touchpad) takes you to the next vertical point on the screen, or the top of the next container.

Alton allows three separate kinds functionality, called ‘Hero’, ‘Bookend’ and ‘Standard’. Standard allows you to use full page scrolling, with each section of 100% height. A scroll brings forth the next the section or the previous section. Bookend lets you create a bookend-kind experience while Hero allows you to scroll jack only the ‘Hero’ section, with the rest of the page having (reenabled) native scrolling.

About:

Homepage:http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Created by:paper-leaf

Installation: [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/paper-leaf/alton/”]

Stellar is a jQuery plugin through which you can easily add parallax scrolling effects. To run, first you must run the $.stellar() function. Animation settings for individual elements can be configured using data attributes on that element.

Stellar even lets you have parallax backgrounds, which are backgrounds that reposition on scroll. One of Stellar.js’ most useful features is offsets.

All elements will return to their original positioning when their offset parent meets the edge of the screen—plus or minus your own optional offset. This allows you to create intricate parallax patterns very easily. (Stellar Documentation)

About:

Homepage:http://markdalgleish.com/projects/stellar.js/

Created by:Mark Dalgeish

Installation: [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/markdalgleish/stellar.js”]

This plugin is created by the same developer (alvarotrigo) who made the pagePiling.js plugin. What multi scroll basically does is, it lets you create an effect where the each page section loads in two divided parts which slide into place as the page loads. Check out the homepage to see what this looks like on your browser. multiScroll.js lets you set the scrolling speed, easing, keyboard scrolling option, and many more properties so that you can customize the effect to exactly how you need it to be.

About:

Homepage:http://alvarotrigo.com/multiScroll/

Created by:alvarotrigo

Installation: [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/alvarotrigo/multiscroll.js”]

About:

Homepage:http://scrollme.nckprsn.com/

Created by:Nick Pearson

Installation: [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/nckprsn/scrollme”]

Parallax Scroll is an easy to use jQuery plugin which lets you create the parallax image scroll effect found on sites like Spotify. It is quite simple to use – just specify the required CSS classes for the image holders. Rather than using tags, to use this plugin you must use elements which have a background image specified( by using the background-image CSS property. You can make the elements responsive using CSS @media queries.

About:

Homepage: http://parallax-scroll.aenism.com/

Created by: Aen

Installation: [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/aentan/Parallax-Scroll”]

About:

Homepage:http://www.jarallax.com/

Created by: Jarallax

Installation: [vc_button title=”Download from the Jarallax website” target=”_blank” color=”default” size=”size_small” href=”http://www.jarallax.com/?page=download”]

Superscrollorama is a jQuery based plugin that supports scroll animations. It is powered by TweenMax and the Greensock Tweening Engine, which increases animation performance, and smoothness. Superscrollorama animations are called via jQuery, and you can use most TweenMax.js functions as well. Unfortunately, these animations are not fully supported by mobile devices (because touch screen devices handle scrolling in a different way). However using the setScrollContainerOffset method, Superscrollorama effects can be accessed on mobile devices.

Here is the code for doing this:

.setScrollContainerOffset(x, y)

(x:the x offset of the scrollcontainer,y:the x offset of the scrollcontainer)

About:

Homepage:http://johnpolacek.github.io/superscrollorama/

Created by:johnpolacek

Installation: [vc_button title=”Download from Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/johnpolacek/superscrollorama”]