Native App Like Fullscreen Page Scrolling - jQuery FullView.Js

Native App Like Fullscreen Page Scrolling - jQuery FullView.Js
File Size: 33.2 KB
Views Total: 334
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 interactions for better accessibility. Default: true.

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

Changelog:

2020-06-25

  • Fixed anchar 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.