Use this plugin to add a little touch of animation to your site!
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.