Best jQuery Parallax Plugins & Tutorials with Demo

jQuery Smooth Parallax Scroll

jQuery Smooth Parallax Scroll

Smooth parallax animations on vertical page scrolling using requestAnimationFrame and CSS3 3D transitions.

Parallax Hero Image with CSS3 3D Transforms

Parallax Hero Image with CSS3 3D Transforms

A full-width figure element, with floating images distributed in a 3D space.

What you can achieve through CSS 3D Transforms is limitless. With power comes responsibility, though. There will be cases when you’ll take full advantage of CSS 3D capabilities. In most projects, though, you can just spice things up a little.

jQuery Parallax Scroll Plugin

jQuery Parallax Scroll Plugin

Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify.

It makes clever use of background-position and background-size properties instead of CSS3 tranforms. It runs buttery smooth and retains the rubber-band scroll behavior in Safari. Works great on mobile too.

ScrollTie : jQuery Plugin that ties CSS property to user scroll

ScrollTie : jQuery Plugin that ties CSS property to user scroll

This jQuery plugin is useful for creating parallax motion or similar effects in which a CSS property needs to be incremented on user scroll.

SParallax : jQuery Parallax Effects Plugin

SParallax : jQuery Parallax Effects Plugin

SParallax is a responsive Jquery plugin that allows you to bind element transitions to the native vertical scroll bar of any web browser, thus allowing you to create parallax effects that are only limited by your imagination.

Bee3D Slider : Touch-Enabled Pure JS Plugin

Bee3D Slider : Touch-Enabled Pure JS Plugin

Bee3D Slider is a floating 3D slider and carousel plugin built with pure Javascript and CSS3 transformations!

Features:

  • Touch-Enabled
  • 9 3D Effects available, with more on the way…
  • Autoplay, with optional pause on hover
  • Infinite Loops
  • Parallax effects, optional
  • Auto-Focus on load
  • Lightweight, 5KB minified
  • Responsive Image Support
  • Video Carousels
  • Mobile-friendly
  • Extensible callbacks
  • Styles come in LESS, SASS, and Stylus

ahRelax : JavaScript Scroll based Parallax Animations

ahRelax : JavaScript Scroll based Parallax Animations

Experimental lightweight JS script to facilitate quick scroll based animations.

Awesome Shop : Premium WordPress Catalog Grid

Awesome Shop : Premium Wordpress Catalog Grid

Awesome Shop is a premium multi-purpose slider for creating content sliders with must-see effects. It has a beautiful and easy-to-use admin interface with supporting modern features like drag n’drop WYSIWYG slider builder, real-time previews and Google Fonts. It’s device friendly by supporting responsive mode, multiple layouts.

Features:

  • Responsive Layout
  • Parallax Effect
  • Animated Layers
  • Google Fonts – over +600 fonts
  • Easy setup – Drag&Drop
  • No extra coding
  • Best for eCommerce

Parallaxer : jQuery Parallax Effects on Content

Parallaxer : jQuery Parallax Effects on Content

Parallaxer is a script that turns any content into a cool parallax effect. It works smooth with any content you throw at it, images and even sliders, video players, basically any html content.

Features:

  • fully responsive
  • touch optimized
  • CSS3 technology
  • iPhone / iPad optimized
  • Android optimized
  • SEO friendly
  • compatible with all major browsers, including IE
  • retina ready
  • embed ready
  • developer / SASS powered

Advanced Parallax Scrolling Effect with CSS3 & JavaScript

Advanced Parallax Scrolling Effect with CSS3 & JavaScript

In this tutorial, we take a look at a more advanced parallax scrolling effect with a background image moving at a different speed to the content above it.We’ll look into achieving a more true-to-life representation of parallax scrolling. As defined previously, parallax is an effect where the position of an object seems to be different when viewed from different positions. In this tutorial, our background will move at a slower speed than our foreground.