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.)
- Create a block-level container with an
idand 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> - Include the
parallaxScroll.jsfile 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> - 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> -
See comments in the provided index.html file for additional features.
-
Create an issue here or contact Scott with any questions, comments or concerns.
