DEV Community

loading...
Cover image for How To Create Full Page Scrolling Effect Using JavaScript

How To Create Full Page Scrolling Effect Using JavaScript

stackfindover profile image Stackfindover Updated on ・2 min read

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn How To Create Full Page Scrolling Effect Using JavaScript.

Download Fullpage.js Library

fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation, and both community and personal support.

How to get full page Js CDN

Click Here to get CDN : CDN

See Also:- Webcam Js Tutorial

Full Page Scrolling Effect Step By Step

First, we need to create two files index.html and style.css then we need to do code for it.

Step:#1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>Full Page Scrolling Using FullPage Js</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;500&display=swap" rel="stylesheet">
    <!--FullPage Js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.min.js" integrity="sha512-HqbDsHIJoZ36Csd7NMupWFxC7e7aX2qm213sX+hirN+yEx/eUNlZrTWPs1dUQDEW4fMVkerv1PfMohR1WdFFJQ==" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.css" integrity="sha512-hGBKkjAVJUXoImyDezOKpzuY4LS1eTvJ4HTC/pbxn47x5zNzGA1vi3vFQhhOehWLTNHdn+2Yqh/IRNPw/8JF/A==" crossorigin="anonymous" />
    <!--End FullPage Js-->
  </head>
<body>
  <div id="fullpage">
    <div class="vertical-scrolling">
      <h1>fullpage</h1>
    </div>
    <div class="vertical-scrolling"></div>
    <div class="vertical-scrolling"></div>
    <div class="vertical-scrolling"></div>
  </div>
  <script>
    new fullpage("#fullpage", {
      sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', '#fec401'],
      sectionSelector: '.vertical-scrolling',
      navigation: true,
      parallax: true,
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0px;
  font-family: 'Josefin Sans', sans-serif;
}
h1 {
    color: #fff;
    text-align: center;
    font-size: 10vw;
}
div#fp-nav a span {
    background: #fff !important;
}
Enter fullscreen mode Exit fullscreen mode

Full Page Scrolling Effect Video Output

Full Page Scrolling Effect Codepen Output

Discussion (0)

pic
Editor guide