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:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<div id="wrapper"> <header> <h1>A demo of using parallax effect in different elements</h1> </header> <main> <aside style="position: absolute; top:50; left:10px;" data-sabglayer="1.5"> The parallax effect is also given in this DOM elements. <div class="scrollspeed">The background scroll speed is 1.5 i.e. <br /> data-sabglayer="1.5"</div> </aside> <!-- collection of sections --> <article> <section id="one"> <h3>About</h3> <p> <br><br> This parallax plug-in is quite simple to use. Just include the: <br /> 1- JS file of the plug-in <br /> 2- Use the data-sabglayer attribute for specifying the background speed. <br><br> By giving a value to the <span>data-sabglayer</span> attribute, you can control the scroll speed of the elements. Enter a number from <span>0</span> (same as foreground) to <span>2</span> (will appear static). <br> <br> <br> </p> <h3>Sample Application</h3> <figure> <img data-sabglayer src="images/1.jpg" alt="cookies"> </figure> <div class="scrollspeed">(this element has a no data-bgscroll attribute set, therefore defaults to 1)</div> <br> <p><b>Above is a in <span>image</span> in a <span>figure</span> element. the figure is styled with <span>overflow:hidden</span>. The parallax effect is also created in that image by using the data-sabglayer.<br><br></b></p> <p data-sabglayer="0.5"><b>As using this plug-in, the parallax can be created in any element. However, becareful as this may also happen.</b></p> <p class="half">This is sample text for the parallax demo</p> <p class="half">This is sample text for the parallax demo</p> <p class="half">This is sample text for the parallax demo</p> <p class="half">This is sample text for the parallax demo</p> <p class="half">This is sample text for the parallax demo</p> <p class="half">This is sample text for the parallax demo</p> <p class="half">This is sample text for the parallax demo</p> </section> </article> </main> </div> |
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.