1kb Parallax Scroll jQuery Plugin - parallax.js

An extremely lightweight (less than 1kb) jQuery plugin that applies a parallax scrolling effect to the background image by making it scroll slower than the entire page.

See Also:

• 10 Best Parallax Scrolling Effects

How to use it:

1. Add a position-fixed background images to the parallax container.

<div id="example">
  ... Any Content Here ...
</div>

#example {
  background: url(bg.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
  height: 600px;
  /* more styles here */
}

2. Download and insert the main JavaScript jquery.parallax.min.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.parallax.min.js"></script>

3. To enable the parallax scrolling effect, just attach the function to the parallax container and done.

$(document).ready(function(){
  $('#example').parallax();
});

4. Set the speed factor from 0 to 1. Default: 0.12.

$('#example').parallax({
  speedFactor: .4
});

5. Set the initial position of the parallax element (parallax-in-parallax).

$('#example').parallax({
  offsetX: "50%",
  offsetY: 0,
});

 

---

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