Best jQuery Parallax Plugins & Tutorials with Demo

Smooth Scroll Manager with JavaScript

Smooth Scroll Manager with JavaScript

Scroll Manager is utility class that controls smooth scroll and showing some elements by scroll event.

PLON : Simple SCSS & JS framework based on jQuery

PLON : Simple SCSS & JS framework based on jQuery

PLON is a simple SCSS & JS framework based on jQuery and Gulp.

  1. This framework was created for front-end developers who don’t want any base visual styling, for people who likes to start from a blank page and have full controll over the effect of their work.
  2. SCSS structure and class naming encourages developers to use objective CSS (OOCSS).
  3. jQuery plugins are very easy to install and to debug.
  4. Provides each plugin as a separate file – so you don’t have to use unnecessary code.

Rallax.js : Dynamic Parallax Scrolling Effects Library

Rallax.js : Dynamic Parallax Scrolling Effects Library

Rallax.js is a vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies.

Scenic 3D Photo Parallax with JavaScript

Scenic 3D Photo Parallax with JavaScript

Scenic – is a simple script that automatically animates layers of still imagery during scrolling for creating an illusion of 3D. It pans and zooms a photo to achieve a parallax effect.

You can also use any html elements as layers like ‘div’ with text or buttons.

For creating 3D photos you will need to break your photo into layers. You can do it easily in editors like Adobe Photoshop. When you purchase our script you also get a video tutorial about creating layers in Photoshop.

ScrollOut : Detects Changes in Scroll

ScrollOut : Detects Changes in Scroll

ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! Use JavaScript callbacks, CSS selectors, or CSS Variables to animate elements in and out. You can even create sticky headers.

Canvallax.js : Easy Parallax Effects on Canvas

Canvallax.js : Easy Parallax Effects on Canvas

Canvallax is a small (5.8kb minified, 2.1kb gzipped) dependency-free Javascript library for managing elements on <canvas>. Support is built-in for:

  • Parallax Scrolling, with optional damping to smooth motions
  • Pointer Tracking
  • Distance/scaling
  • Images on Canvas, from URLs or nodes (<img /><canvas />, etc) with Canvallax.Image
  • Common shapes (Canvallax.CircleCanvallax.Polygon and Canvallax.Rectangle)
  • Element stacking with zIndex
  • Fixed position Elements
  • Element cloning

jQuery Header Scroll Effect Plugin

jQuery Header Scroll Effect Plugin

The scroll effect header is a kind of parallax whose difference lies in the change, if parallax usually occurs because of the movement of two objects, while this is changing and moving. Obviously if the scroll header will change blur, sepia or other effects follow movement scroll.

Features

  • Valid All HTML5
  • Valid CSS
  • Responsive
  • All Filter Scroll Effect
  • Bonus Effect Margin and Border Radius

parallaxContent : jQuery Parallax Content Plugin

parallaxContent : jQuery Parallax Content Plugin

ParallaxContent is a jQuery parallax content plugin based on GSAP .

Parallax Color Bars with JavaScript

Parallax Color Bars with JavaScript

Amazing animated color bars parallax effect on black & white image while page scrolling.In parallaxColorBars you can now add settings using the data-parallax-color-bar attribute. You still need to call $(element).parallaxColorBars() to initialize parallaxColorBars on the element.

jQuery Parallax Background Plugin

jQuery Parallax Background Plugin

jQuery parallax background plugin based on GSAP.In parallaxBackground you can add settings using the data-parallax-background attribute. You still need to call $(element).parallaxBackground() to initialize parallaxBackground on the element.