Skip to content
a parallax scroll jQuery plugin
HTML JavaScript CSS
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
README.md
index.html
jquery-2.1.3.min.js
parallaxScroll.js
style.css

README.md

Parallax Scroll jQuery Plugin

Use this plugin to add a little touch of animation to your site!

Usage

Simplest usage:

(Preliminaries: make sure you have jQuery included in your project directory and download the parallaxScroll.js file into your project directory as well.)

  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>
  1. Include the parallaxScroll.js file in the <head> of your .html file AFTER your jQuery <script> tag.
<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="parallaxScroll.js" type="text/javascript"></script>
  1. At the very end of the <body> section, include the following:
<script>
  $(function () {
    new jQPS({
      containerId: "your-id-here",
      backgroundImgUrl: "path/to/your-background-image.jpg"
    });
  });
</script>
  1. See comments in the provided index.html file for additional features.

  2. Create an issue here or contact Scott with any questions, comments or concerns.

You can’t perform that action at this time.