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