Skip to content

Latest commit

 

History

History
57 lines (44 loc) · 1.55 KB

README.md

File metadata and controls

57 lines (44 loc) · 1.55 KB
Raw

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.