Native App Like Fullscreen Page Scrolling - jQuery FullView.Js

FullView.Js is a simple to use jQuery plugin to implement a native mobile app like, mobile-friendly, fullscreen scrolling effect on one page scroll website or single page web application.

The plugin enables the visitor to navigate through sectioned content with a smooth scroll effect. Supports keyboard, mouse wheel on desktop, and swipe up/down/left/right events on touch device.

Also comes with a side navigation or sticky header navbar containing anchor links that allow the visitor to scroll the page to a specific content section.

How to use it:

1. Add the jQuery FullView.Js plugin's JavaScript and CSS files to the webpage.

<link rel="stylesheet" href="/path/to/dist/fullview.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/fullview.min.js"></script>

2. Add content sections to the fullscreen page view.

<div id="fullview">
  <div>
    <h2>Section 1</h2>
  </div>
  <div>
    <h2>Section 2</h2>
  </div>
  <div>
    <h2>Section 3</h2>
  </div>
  <div>
    <h2>Section 4</h2>
  </div>
  ...
</div>

3. Initialize the plugin on the top element and you're done.

$(function(){
  $("#fullview").fullView();
});

4. Determine whether or not to show the side navigation. Default: true.

$("#fullview").fullView({
  dots: true,
  dotsPosition: 'right'
});

5. Create a header navbar to navigate between these sections.

<div id="navbar">
  <ul>
    <li>
      <a href="#section1">
        Section 1
      </a>
    </li>
    <li>
      <a href="#section2">
        Section 2
      </a>
    </li>
    <li>
      <a href="#section3">
        Section 3
      </a>
    </li>
    <li>
      <a href="#section4">
        Section 4
      </a>
    </li>
  </ul>
</div>

$("#fullview").fullView({
  navbar: "#navbar",
});

6. Apply an easing function to the smooth scrolling effect. You might need a third-party easing library (like jQuery UI or jQuery easing plugin) for additional easing functions. Default: 'swing'.

$("#fullview").fullView({
  easing: 'linear'
});

7. Execute a function when you switch between pages.

$("#fullview").fullView({
  onViewChange: function (currentView) {
    // console.log(currentView)
  }
});

8. Enable keyboard/mouse/touch interactions for better accessibility. Default: true.

$("#fullview").fullView({
  keyboardScrolling: true,
  mouseScrolling: true,
  touchScrolling: true
});

9. Determine whether to back to the first page when you scroll on the last one. Default: false.

$("#fullview").fullView({
  backToTop: true
});

10. Determine the scrolling speed. Default: 500ms.

$("#fullview").fullView({
  speed: 800
});

11. Callback functions that will be triggered on scroll start/end.

$("#fullview").fullView({
  onScrollStart:  function (currentView, destinationView, direction) {
    // Do Something
  },
  onScrollEnd:  function (currentView, previousView, direction) {
    // Do Something Usefull
  }
});

Changelog:

2020-09-06

• added more easing

2020-09-05

• added Speed Option and More Callbacks

2020-09-02

• fix parse issue

2020-09-01

• Updated

2020-06-25

• Fixed anchor issue

2020-06-25

• Added more options

---

This awesome jQuery plugin is developed by seeratawan01. For more Advanced Usages, please check the demo page or visit the official website.