Best jQuery Parallax Plugins & Tutorials with Demo

Simple Parallax Scrolling Effect with CSS3

Simple Parallax Scrolling Effect with CSS3

In this tutorial, we take a look at a beautiful parallax scrolling effect in the simplest of ways, with stationary backgrounds and scrolling content.

Magnetize : jQuery Responsive 3D Parallax Gallery

Magnetize : jQuery Responsive 3D Parallax Gallery

Unique 3D gallery with responsive layout, touch navigation and extensive use of CSS3 animation.

Magnetize Gallery displays images in 3-dimensional space. Pictures are divided into three layers animated with parallax on mouse hover and an ability to reorder these layers in a carousel manner. Click on an image brings it to the front and displays the picture in full-size mode.

multiScroll.js : Create Divided Multi Scrolling Pages

multiScroll.js : Create Divided Multi Scrolling Pages

A simple plugin to create multi scrolling websites with two vertical scrolling panels.MultiScroll js 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.

Create a Masked Background Effect With CSS

Create a Masked Background Effect With CSS

Today we’re going to be stepping through a really cool technique you can use to create an effect that’s a little bit like parallax scrolling, yet doesn’t need any JavaScript; it can be achieved very simply through pure CSS.

This technique could be used to create great product description pages, or even something akin to a Powerpoint/Keynote presentation, and would be a great potential fit for online story illustration.

Pageslider : jQuery Page Slider

pageslider : jQuery page slider

A jQuery page slider uses jQuery Mousewheel plugin along with a sleek parallax effect.

Starscroll : jQuery Plugin to Show Starfield on their website

Starscroll : jQuery Plugin to Show Starfield on their website

Create a div with purpose as your background .. activate plugin; animated or reactive as the user scrolls. The plugin automatically will fix the div so it works seemlessly.

N.b the only css you might want to change is the z-index of your div. Also dont put anything in your starscroll div.

Features:

  • 8-bit or 16-bit mode! (how retro do you wanna go!?)
  • Animated or reactionary to scroll
  • Multiple layers of true parallax
  • Custom colours and complexities
  • Every websites dream
  • Forces static on mobile detection

qpScroll : jQuery Quick Parallax Scroll Plugin

qpScroll : jQuery Quick Parallax Scroll Plugin

qpScroll is a jQuery plugin that creates a super quick way of putting together a simple parallax background for a page, all using css background-images.

I have kept it super simple – the three major settings are: – how much faster/slower do images move compared to the scroll speed – how much faster/slower does each image scroll compared to one before it – how much does each image cover the one before it

Paranimator : jQuery Parallax Animation Effects Library

Paranimator : jQuery Parallax Animation Effects Library

jQuery Library for easy implementation Parallax Effects.Paranimator provide easy procedures for parallax animation. future, I’ll implement HTML level interface for this module(DataAttribute).

Features:

  • Animate with mouse scrolling.
  • Pagination (unit mode)
  • on keyframe beginning animation.
  • layerd background scrolling.
  • background auto scrolling.

jInvertScroll : jQuery Horizontal Parallax Plugin

jInvertScroll : jQuery Horizontal Parallax Plugin

jInvertScroll is 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.

How to Integrate Simple Parallax with Twitter Bootstrap

How to Integrate Simple Parallax with Twitter Bootstrap

Thanks to the flexibility of Twitter Bootstrap, you’re not in any way limited only to the framework’s default container and grid styles. It can actually be quite easy to introduce new layout options to your site without needing to worry about disrupting Bootstrap’s functionality. With this tutorial, we’ll learn how to do that by integrating a simple scrolling parallax effect to the page.