How To Create A Full-screen Scrolling Website

In this tutorial, you will learn to build the amazing full-screen Scrolling websites.

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

FullView.js is a jQuery plugin that 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.

FullView.js (Thumbnail)

Getting Started

Let’s go ahead and download the FullView.js Plugin. Following are required files.

• 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+

My File Structure

Next, organize the project files, the ways you are used to.

This is my file structure for this tutorial post. I usually placed all my CSS files in the CSS folder and all my js files in the js folder.

Usage

Add the fullview.js plugin’s JavaScript and fullview.css CSS file to the webpage.

Every direct child of id="fullview" element will be defined as full-screen section. The active section by default will be the starting point when the page loads. Copy the following Code into your body tag.

Now, initialize the plugin on the element and and be sure you place this script in footer.

The plugin will eventually starts to work, you can add styles and make the website more alive.

Here is some custom CSS styles so you can start with it:

#fullview > div {
  background-color: azure;
  display: flex;
}
#fullview > div:nth-child(even) {
  background-color: #282c34;
  color: #ffffff;
}
#fullview h2 {
  margin: auto;
  width: 50%;
  text-align: center;
}

Below is the sample working example.

Codepen

To link navigation menu with sections, 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 menu with the sections,an href attribute of menu’s anchor tag will be needed to use with the same id as used within the sections.

<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>
<div id="fullview"> 
   <div id="page-one">Section 1</div> 
   <div id="page-two">Section 2</div> 
   <div id="page-three">Section 3</div>  
</div>

Use navbar option, to create activate navigation menu

$(document).ready(function () {
   $("#fullview").fullView({
      //Navigation
      navbar: "#navbar",
   })
});

You can also add custom Styles for Navigation menu:

#navbar {
  position: fixed;
  width: 100%;
  padding: 20px;
}
#navbar ul {
  list-style: none;
  text-align: center;
}
#navbar li {
  display: inline-block;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid gray;
  border-radius: 5px;
}
#navbar li a {
  text-decoration: none;
  color: black;
}
#navbar li a.active {
  font-weight: 600;
}

Below is the complete working example with menu setup. Please have a look at it.

Moreover, To 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.

Read Out the Official Documentation for more options detail.

Enjoy 😀.