Minimalist Background Parallax Scroll Plugin - jQuery ParaLasic

File Size: 5.42 KB
Views Total: 4537
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

2. Add a background image to the parallax container.

.paralasic {
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)),
  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=""

4. The main JavaScript to implement the parallax scroll effect. Copy and put the following JavaScript snippets after jQuery.

jQuery(window).on('scroll', function () {

  $(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.