FullView.Js

Javascript | JQuery Plugin

FullView.js is a simple, light-weighted and easy to use JavaScript library to create full-screen scrolling websites.

Its enables the visitor to navigate through pages with a smooth full-screen scroll effect. Supports keyboard, mouse wheel on desktop, and swipe up/down/left/right events on touch device.

Also comes with a side navigation dots, containing anchor links that allow the visitor to scroll the page to a specific content section.

Compatibility

Demo online | Codepen | Tutorial

Get Started

All you will need to include:

• The JavaScript file fullview.js (or its minified version fullview.min.js)
• The css file fullview.css (or its minified version fullview.min.css)
• The JQuery file, must be version 1.2+

Including files:

<link rel="stylesheet" type="text/css" href="fullview.css" />
 
<!-- Javascript Files -->
<script  src="https://code.jquery.com/jquery-3.5.1.min.js"  crossorigin="anonymous"></script>
 
<script type="text/javascript" src="fullview.js"></script>

Using CDNS

Optionally, If you prefer to use a CDN to load the needed files,

https://cdn.jsdelivr.net/npm/fullview/dist/fullview.min.css

https://cdn.jsdelivr.net/npm/fullview/dist/fullview.min.js

Using NPM

Optionally, you can install fullView.js with npm

npm install fullview

Usage

HTML Structure

Start your HTML document with the compulsory HTML DOCTYPE declaration, must start with a <! DOCTYPE> declaration.

Sections should be placed inside a wrapper (<div id="fullview"> you can change the id). Every direct child of id="fullview" element will be defined as section. The active section by default will be the starting point when the page loads.

<div id="fullview">
      <div><!-- Some Section --></div>
      <div><!-- Some Section --></div>
      <div><!-- Some Section --></div>       
</div>

You surely can add active class to any section for different starting point rather than the first section.

<div class="active">Some section</div>

Initialization

You have to use fullView.js as a jQuery plugin and be sure you place this script in footer.

$("#fullview").fullView();

// OR - For More Customization
$("#fullview").fullView({
    //Optional
    dots:  true,
    dotsPosition:  'right',
    // ...
    // Read Docs for more options details
 
    // Callbacks
    onScrollStart:  function (currentView, destinationView, direction) {
          //  Do Something Usefull
    },
    onScrollEnd:  function (currentView, previousView, direction) {
          //  Do Something Usefull
    }
})

Creating Navigation to Sections

To activate naviagtion, navbar option would be use. This way the scrolling of the sections will activate the corresponding element in the menu. In order to link the elements of the navigation with the sections, an href attribute of anchor tag will be needed to use with the same anchor links as used within the sections.

<!-- Navigation Menu -->
<div id="navbar">  
   <ul>  
      <li>  
         <a href="#page-one">Section 1</a>  
      </li>  
      <li>  
         <a href="#page-two">Section 2</a>  
      </li>  
      <li>  
         <a href="#page-three">Section 3</a>  
      </li>  
  </ul>  
</div>

<!-- Sections -->
<div id="fullview">
      <div id="page-one"><!-- Some Section --></div>
      <div id="page-two"><!-- Some Section --></div>
      <div id="page-three"><!-- Some Section --></div>       
</div>

/* Script */
$("#fullview").fullView({
    //Navigation
    navbar:  "#navbar",
})

Check out the complete working Menu Example

Default Side Navigation (Dots)

FullView.js also comes with side dots navigation, To disable, dots option will be use. The positioning of side navigation will be change by using dotsPosition option.

/* Script */
$("#fullview").fullView({
    dots:  true, // Default 'true'
    // Other Options
    dotsPosition:  'right', // Default 'right'
    dotsTooltips:  true, // Default 'false'
})

Tooltips

In order to add tooltips to Side Navigation 'dot' elements, data-tooltip attribute will be added to any section and an option dotsTooltips will be changed to true.

<div data-tooltip="Section Title">Some section</div>

Attributes added by fullview.js

fullView.js adds few attibutes including classes and HTML5 data attribute in different elements to keep a record of the status of the webpage:

• active is added the current visible section.
• active is added to the current navbar element (if using the navbar option).
• data-scroll attribute is added to the menu items and dots

All Options

Open Source License

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use it under the terms of the GPLv3.