Skip to content
gh-pages
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
img
 
 
 
 
 
 
 
 

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.

About

a parallax scroll jQuery plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published