The jQuery Parallax Plug-in

The fallings is a nice and simple jQuery plug-in for creating the parallax effect on your website. The development version is only 4Kb file while production or minified file is only 2Kb.

The plug-in offers a few options to set the velocity to control the speed as you scroll down and a few other options.

Demo1 Demo2
Developer page Download plug-in

How to set up the falling plug-in

For setting up the parallax effect by using the falling plug-in, first, download the plug-in from the links in above section.

Place the jquery.fallings.js file in the head section of the web page, after the jQuery library. You also need to place the CSS file that comes with the package. See the demos below for using the plug-in and creating the parallax effect.

A Demo of parallax effect

Two images are used for the parallax effect in the demo. While you may also create the effect on text elements only.

The options for three elements are set in the jQuery code. The velocity of all three elements is set different. The first element on top is text element which velocity is set as 1.

The second is an image which velocity is set as .5 along with other options.

The third is the footer image which velocity is .3 with initialPosition: 100 and bgParallax: true while the bgPercent: ‘50%’. Have a look:

See online demo and code

The markup used for the demo:

The script:

See the complete code on the demo page.

A demo with different values

In this example, different values are used than the above example. For example, bgParallax value for both images is kept false. Similarly, the velocity value is kept more for high speed in relation to scrolling.

See online demo and code

The Script:

You may learn more about this nice plug-in by visiting the developer’s page or play with different options.