Full Page Parallax Scrolling Effects with jQuery Swctallax and InView Plugins
File Size: | 604 KB |
---|---|
Views Total: | 13738 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

In this article we're going to create full page parallax scrolling effects with the power of jQuery Swctallax and InView Plugins.
How to use it:
1. Include the latest version of jQuery javascript library on the page.
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
2. Include the required javascript library files after jQuery library.
<script src="assets/js/jquery.inview.js"></script> <script src="assets/js/jquery.swctallax.js"></script>
3. Create the html.
<section class="top swctallax"> Section 1 </section> <section class="middle swctallax"> Section 2 </section> <section class="bottom swctallax"> Section 3 </section>
4. Set the background images for the sections.
section { height: 100%; } section.top { background: url('../img/top.jpg') no-repeat center center fixed; } section.middle { background: url('../img/middle.jpg') no-repeat center center fixed; } section.bottom { background: url('../img/bottom.jpg') no-repeat center center fixed; }
5. Call the plugin with options.
<script> $(document).ready(function() { $('.swctallax').swctallax({ startPoint: 0, // starting point of document endPoint: $(document).height(), // height of the document jump: 1, // any number between 0 and 1 background: "on", // optional "off" full: true //fullscreen or not }); }); </script>
This awesome jQuery plugin is developed by mikehuebner. For more Advanced Usages, please check the demo page or visit the official website.