Full Page Parallax Scrolling Effects with jQuery Swctallax and InView Plugins

Full Page Parallax Scrolling Effects with jQuery Swctallax and InView Plugins
File Size: 604 KB
Views Total:
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.