How to create jQuery Parallax effect on any element?

The parallax effect on any element

Earlier, I have covered two jQuery plug-ins for creating parallax effect with images only. The text is used as the foreground to the background images in parallax plug-in.

In this tutorial, the jQuery parallax plug-in can be used for creating parallax effect in any element. That can be a simple paragraph with text or combination of text and images, forms, tables etc.

How to use parallax effect with a demo?

The SC parallax plug-in is quite simple to use. After including the jQuery reference, you need to include the JS file of the plug-in. The file size is only around 4Kb. (You may download the plug-in here or simply download the saparallax.js file from demo page’s view source).

The second step is to specify the elements where you want to use the parallax effect. This is done by using the data-sabglayer attribute in any element whether it is an image or a div containing text or a paragraph text etc.

Just specify the speed from 0 to 2 in data-sabglayer data attribute and you are done.

See a demo online by clicking the link or image below where it uses a sidebar, div elements, paragraph and image for the parallax effect. Just scroll down the page and see the effect:

jquery parallax div para img

See online demo and code

The reference files including jQuery and plug-in JS file:

 <script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js”></script>

<script src=”js/saparallax/saparallax.js”></script>

The markup used in this example:

 

The CSS is used for styling different sections of the demo that you may see at the demo page.

Similarly, you may apply this parallax effect in HTML tables, forms elements like textarea etc.