Subtle Parallax Effect For Background Images - jQuery js-parallax

js-parallax is a minimalist jQuery parallax plugin designed to add a touch of depth and interactivity to any content of your wesbite. Licensed under the Apache License, Version 2.0.

It works by sitting your content atop a subtly shifting background image that responds to the user's scroll movements. This can lead to higher engagement rates as visitors are more likely to stick around and interact with your content.

How to use it:

1. Load the main script 'parallax.js' after jQuery but before the closing body tag.

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

2. Call the parallax() function on the target container and specify an image to serve as the parallax background.

<div id="example">
  foreground content here
</div>

$(function () {
  $('#example').parallax({
    image: 'bg.jpg',
  });
})

3. Set the height of the parallax container.

$(function () {
  $('#example').parallax({
    image: 'bg.jpg',
    height: 300
  });
})

/* Or via CSS */
#example {
  height: 300px;
}

---

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