Simple Full Window Vertical Scrolling Plugin For jQuery - fullscreen.js

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.