Minimalist Background Parallax Scroll Plugin - jQuery ParaLasic

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.