Minimalist Background Parallax Scroll Plugin - jQuery ParaLasic
File Size: | 5.42 KB |
---|---|
Views Total: | 4543 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The jQuery ParaLasic plugin applies a subtle smooth parallax scroll effect to backgrounds using CSS background-position
property and a little bit of JavaScript.
How to use it:
1. Add the paralasic class to the parallax container and specify the speed at which the parallax scroll effect runs.
<header id="demo" class="paralasic" data-paralasic="0.5"> <h1>jQuery ParaLasic JS Plugin</h1> </header>
2. Add a background image to the parallax container.
.paralasic { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url(bg.jpg); background-attachment: fixed; background-size: cover; background-size: 100vw; background-position: center top; background-repeat: no-repeat; background-color: #000000; }
3. Include the needed jQuery JavaScript library at the bottom of the webpage.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script>
4. The main JavaScript to implement the parallax scroll effect. Copy and put the following JavaScript snippets after jQuery.
jQuery(window).on('scroll', function () { /* PARALLAX EFFECT ON HEADER */ $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var paralasicValue = $('.paralasic').attr('data-paralasic'); $('.paralasic').css('background-position', 'center top -' + scrollTop * paralasicValue + 'px'); /* 1.8 - default value. Increase less to go stopping the effect */ }); });
5. Or directly include the JavaScript file paraLasic.js
after jQuery.
<script async src="paraLasic.js"></script>
This awesome jQuery plugin is developed by alexlupoz. For more Advanced Usages, please check the demo page or visit the official website.