Simple Full Window Vertical Scrolling Plugin For jQuery - fullscreen.js
File Size: | 7.67 KB |
---|---|
Views Total: | 3726 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another fullscreen one page scroll plugin that allows you to scroll through different full-window sections through either mouse wheel or the bullets on the right side of this page.
How to use it:
1. Create content sections.
<div class="wrapper"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div>
2. Create a side navigation.
<div class="nav"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>
3. The required CSS.
.wrapper { position: relative; -webkit-transition: -webkit-transform 1s ease; -moz-transition: transform 1s ease; -o-transition: transform 1s ease; -ms-transition: transform 1s ease; transition: transform 1s ease; } .row { position: relative; overflow: hidden; } .nav { position: fixed; width: 20px; height: 160px; margin-top: -80px; top: 50%; right: 50px; z-index: 20000; } .nav .dot { cursor: pointer; width: 15px; height: 15px; margin-top: 8px; border-radius: 18px; background: rgba(255,255,255,0.5); } .nav .cursor { background: #5647c8; }
4. Load jQuery library and the fullscreen.js at the end of the document.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="fullscreen.js"></script>
5. Initialize the plugin.
$.FullScreen({ // CSS selector for themain wrapper move: '.wrapper', // CSS selector for the content sections row: '.row', // CSS selector for the side navigation nav: '.nav', // Animation options time: '1s', type: 'cubic-bezier(1,-0.12, 0.44, 0.99)', // CSS class for the side navigation navClass: 'cursor', // minimum height minHeight: 200 })
6. Events.
var scroll = $.FullScreen() // no scroll event scroll.on('no-scroll', function(data) { console.log(data) }) // ready to scroll event scroll.on('ready-scroll', function(data) { console.log(data) }) // scroll is done event scroll.on('done-scroll', function(data) { console.log(data) })
This awesome jQuery plugin is developed by obadogg. For more Advanced Usages, please check the demo page or visit the official website.