You have seen Parallax effect for background and content on most of the website. This interactive Parallax effect gives website to an stylish and fresh look. This will create exciting and great browser experience for user. Mostly Parallax effect use on website home page, landing page.
What is Parallax effect:
Parallax effect involves multiple background which are moving independently vertically or horizontally. In this effect web page’s background move at a slower rate than the foreground.
This technique enhance the website style and make it more trendy. Now a days this technique is very much using by web designers.
Lets check it out, how to create Interactive Parallax Effect For Background using jQuery.
Steps to Create Interactive Parallax Effect with jQuery:
Step 1:
We are using HTML data attribute to create Parallax effect. First create an simple HTML page and add some background images. Use “data-turbo-parallax” attribute to config parallax effect on each background layer. Check below code for example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <body> <div style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-image: url('sky.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 60% 100%;" data-turbo-parallax="{'zoom': 1.25, 'depth': 9}"> </div> <div style="position: absolute; width: 100px; height: 100px; left: 50%; top: 10%; background-image: url('sun.png'); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;" data-turbo-parallax="{'zoom': 2, 'depth': 3}"> </div> </body> </html> |
Step 2:
Now add jQuery library and parallax.js script in the your HTML page. These script files require to show parallax effect.
|
1 2 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="../src/parallax.js"></script> |
Step 3:
Now write parallax effect activation code in html page. Just write down below script code to activate it.
|
1 2 3 |
<script> let parallax = new TurboParallax(); </script> |
You can manage the showing effect with zoom, depth attribute. This is quite easy to config on any website theme or page. So try this Interactive Parallax effect and make your website more trendy.
[sociallocker]Download[/sociallocker]
