Lightweight jQuery Parallax Scrolling Plugin - HW Parallax

File Size: 709 KB
Views Total: 4212
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight jQuery Parallax Scrolling Plugin - HW Parallax

HW Parallax is a simple and easy-to-implement jQuery plugin that allows to apply the popular Parallax scrolling effects on background images.

How to use it:

1. Load the jQuery HW Parallax plugin's CSS in the head section of the document.

<link rel="stylesheet" href="css/hw-parallax.min.css">

2. Load jQuery library and the jQuery HW Parallax plugin's script at the bottom of the document.

<script src=""></script>
<script src="js/hw-parallax.min.js"></script>

3. Create a parallaxed section with a background image using data-* attributes.

<section class="parallax" data-image="img/background.jpg" data-width="2560" data-height="1600">

  Your content goes here


4. The plugin also supports tiled background images.

<section class="parallax" data-tile="img/tile.png">

  Your content goes here


5. Initialize the plugin to enable the background parallax scrolling effect.

scroll_factor: 0.2,
image_attr: 'image'

Change log:


  • Fix background flicker on resize (in Firefox)

This awesome jQuery plugin is developed by ziad-saab. For more Advanced Usages, please check the demo page or visit the official website.