Small Fullscreen Vertical Scrolling Plugin - Fullpage
File Size: | 4.3 KB |
---|---|
Views Total: | 6120 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight and cross-browser jQuery vertical scrolling plugin which allows you to scroll through a set of full screen sections by mouse wheel or by navigation links.
Basic usage:
1. Load jQuery library, jQuery Mouse Wheel plugin and the jQuery fullpage plugin at the bottom of your one page scrolling website.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script> <script src="fullpage.js"></script>
2. Create the html for a one page website consisting of multiple full screen sections.
<div class="box"> <div class="section s1 active"> Section 1 </div> <div class="section s2"> Section 2 </div> <div class="section s3"> Section 3 </div> <div class="section s4"> Section 4 </div> <div class="section s5"> Section 5 </div> </div>
3. Load jQuery library, jQuery Mouse Wheel plugin and the jQuery fullpage plugin at the bottom of your one page scrolling website.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script> <script src="fullpage.js"></script>
4. The required CSS styles for the fullscreen sections.
html, body { margin: 0; overflow: hidden; } .box { position: relative; height: 100%; overflow: hidden; transition: transform 0.3s linear; } .section { overflow: hidden; height: 100%; }
5. Style the side navigation links.
.controlBtns { position: fixed; top: 50%; right: 10px; margin-top: -40px; _position: absolute; } .controlBtns a { width: 10px; height: 10px; overflow: hidden; margin-bottom: 10px; border-radius: 50%; background-color: #9f9f9f; display: block; } .controlBtns a.active { background-color: #fff; }
6. Call the plugin.
$('.box').FullPage({ // CSS class for content sections section:'.section', // active CSS active:'active', // CSS class for container container:'.box', // CSS class for side navigation controller:'.controlBtns', // animation speed speed: 300, // transition delay delay: 600, // callback callback:function(i) { switch (i) { case 0: document.title = 1; break; case 1: document.title = 2; break; case 2: document.title = 3; break; case 3: document.title = 4; break; case 4: document.title = 5; break; default: break; } } });
This awesome jQuery plugin is developed by confidence68. For more Advanced Usages, please check the demo page or visit the official website.