Responsive Parallax Scroll Background Image with jQuery Plugin

Parallax Scroll jQuery Plugin that allows you to implement a familiar Parallax effect with your background image in vertical scrolling of the page.

Must Read: Simple CSS and jQuery for Parallax Scrolling | Paralex

How to make use of it:

1. Create a block-level container with an id and fill it with your content.

<div id="p-scroll-1">
  <h1>Content Title</h1>
  <p>Content paragraph one.</p>
  <ul>
    <li>List item of content<li>
    <li>Another</li>
    <li>And another</li>
    <li>So many list items</li>
    <li>So many list items</li>
    <li>So many list items</li>
    <li>So many list items</li>
    <li>So many list items</li>
  </ul>
  <p>Here's another paragraph.</p>
</div>

2. Include the parallaxScroll.js file in the <head> of your HTML file after the jQuery <script> tag.

<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="parallaxScroll.js" type="text/javascript"></script>

3. At the end of the <body> section, include the following:

<script>
  $(function () {
    new jQPS({
      containerId: "your-id-here",
      backgroundImgUrl: "path/to/your-background-image.jpg"
    });
  });
</script>