How To Create A Full-screen Scrolling Website

Getting Started

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

• The JavaScript file (or its minified version )
• The CSS file (or its minified version )
• The JQuery file, must be version 1.2+

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 in the CSS folder and all my in the js folder.

Usage

Add the plugin’s JavaScript and CSS file to the webpage. You can also add the JQuery file if you don’t have it already.

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

Every direct child of 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 tag.

<div id="fullview">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

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

<script type="text/javascript">
  $(document).ready(function () {
    $("#fullview").fullView();
  });
</script>

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:

Below is the sample working example.

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

<script type="text/javascript">
$(document).ready(function () {
  $("#fullview").fullView({
    //Navigation
    navbar: "#navbar",
  })
});
</script>

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 😀.