jQuery Plugin For One Page Parallax Scrolling Website - Page Slider
File Size: | 3.73 MB |
---|---|
Views Total: | 2401 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

pageslider is a jQuery plugin which allows the visitor to use mouse wheel to navigate between different sections/slides of your web page with a Parallax-like scrolling effect.
How to use it:
1. Include the jQuery library and jQuery mousewheel plugin on the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery-mousewheel.min.js"></script>
2. Create some sections/slides for the plugin.
<section class="slide slide1 js-slide"> Your content goes here </section> <section class="slide slide2 js-slide"> Your content goes here </section> <section class="slide slide3 js-slide"> Your content goes here </section> ...
3. The required CSS for the slide styles. Modify them or add any other styles however you like.
.slide { background-size: cover; color: #333333; } .slide.slide1 { color: white; background-image: linear-gradient(bottom, white 60%, #333333 40%); background-image: -o-linear-gradient(bottom, white 60%, #333333 40%); background-image: -moz-linear-gradient(bottom, white 60%, #333333 40%); background-image: -webkit-linear-gradient(bottom, white 60%, #333333 40%); background-image: -ms-linear-gradient(bottom, white 60%, #333333 40%); } .slide.slide2 { background: url(../img/2.jpg) 100% 100% no-repeat fixed; } .slide.slide3 { background: url(../img/3.jpg) 50% 0 repeat fixed; }
5. Add the following Javascipt snippets in your JS file.
$(function(){ var $window = $(window); var slide = $('.js-slide'); var sectionHeight = $(window).height(); var slideHeight = $(slide).height(); slide.height(sectionHeight); var scrollingScreen = false; $(".js-slide").mousewheel(function(event, delta) { if ( !scrollingScreen ) { scrollingScreen = true; // prevent call var top = $("body").scrollTop() || $("html").scrollTop(); // Chrome places overflow at body, Firefox places whacks at html... // Finds slide headers above/below the current scroll top var candidates = $(".js-slide").filter(function() { if ( delta < 0 ) return $(this).offset().top > top + 1; else return $(this).offset().top < top - 1; }); // one or more slides found? Update top if ( candidates.length > 0 ) { if ( delta < 0 ) top = candidates.first().offset().top; else if ( delta > 0 ) top = candidates.last().offset().top; } // Perform animated scroll to the right place $("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() { $('.container h2').fadeIn(); // Release call scrollingScreen = false; }); } return false; }); // Create HTML5 elements for IE ('cause it's bad) document.createElement("article"); document.createElement("section"); });
This awesome jQuery plugin is developed by kirstyr. For more Advanced Usages, please check the demo page or visit the official website.