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>
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;
}
Full Page Scrolling Effect Video Output
Full Page Scrolling Effect Codepen Output
Top comments (0)