Lightweight jQuery Parallax Scrolling Plugin - HW Parallax

File Size: 709 KB
Views Total: 4275
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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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

</section>

4. The plugin also supports tiled background images.

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

  Your content goes here

</section>

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

$('.parallax').parallax({
scroll_factor: 0.2,
image_attr: 'image'
});

Change log:

2015-10-16

  • 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.