Skip to content

⚡️ Create full-screen pages fast and simple - A simple and easy to use a library that creates fullscreen scrolling websites

License

Notifications You must be signed in to change notification settings

seeratawan01/fullview.js

Repository files navigation

FullView.Js

Javascript | JQuery Plugin

preview

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.

Buy Me a Coffee

Support me on Patreon

Compatibility

IE 9+ Opera Chrome firefox Android 4.1+ Safari 7.1+

GitHub release License downloads downloadspermonths hits filesize

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

Option Type Default Values Description
navbar string undefined selector To link the elements of the navigation with the sections
dots boolean true true or false For side dots navigation visibility
dotsPosition string right right or left Defines side dots navigation positioning
dotsTooltips boolean false true or false Shows a tooltips for the sections on hover of dots navigation element.
speed number 500 milliseconds (>=350) Speed in milliseconds for the scrolling transitions.
easing string linear swing, linear (or any third-party easing library) Defines the transition effect.
backToTop boolean false true or false Defines whether scrolling down in the last section should scroll to the start one or not.
keyboardScrolling boolean true true or false Defines if the scroll can be performed using the keyboard.
mouseScrolling boolean true true or false Defines if the scroll can be performed using the mouse.
touchScrolling boolean true true or false Defines if the scroll can be performed using the touch.
onScrollStart function null callback This callback return the element of current section, element of destination section and scroll direction on every scroll Start.
onScrollEnd function null callback This callback return the element of current section, element of previous section and scroll direction on every scroll finish.

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.

About

⚡️ Create full-screen pages fast and simple - A simple and easy to use a library that creates fullscreen scrolling websites

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project