Full Page Parallax Scrolling Effects with jQuery Swctallax and InView Plugins

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.