Fullpage Scrolling with Vanilla JavaScript
Demo 🌎
https://fullpagescrollpurejs.surge.sh/
Usage 🔧
Download last version : fullpage.zip or fullpage.tar.gz
Import css and javascript on your main html file
<link
rel="stylesheet"
type="text/css"
href="//stylesheet/full-page-scroll.min.css"
/>
<script src="//javascript/full-page-scroll.min.js"></script>Use html sections to structure your fullpage flow
<div id="main" class="scroll-container">
<section data-index="section-1">Section 1</section>
<section data-index="section-2">Section 2</section>
<section data-index="section-3">Section 3</section>
</div>Call init method with configuration object
<script type="text/javascript">
new fullScroll({
mainElement: "main",
displayDots: true,
dotsPosition: "left",
animateTime: 0.7,
animateFunction: "ease",
});
</script>Full Example 🐶
<html>
<head>
<title>Simple Example</title>
<link
rel="stylesheet"
type="text/css"
href="//stylesheet/full-page-scroll.min.css"
/>
</head>
<body>
<div id="main" class="scroll-container">
<section style="background-color:#DCADAD" data-index="section-1">
Section 1
</section>
<section style="background-color:#555594" data-index="section-2">
Section 2
</section>
<section style="background-color:#5992AD" data-index="section-3">
Section 3
</section>
</div>
<script src="//javascript/full-page-scroll.min.js"></script>
<script type="text/javascript">
new fullScroll({
mainElement: "main",
displayDots: true,
dotsPosition: "left",
animateTime: 0.7,
animateFunction: "ease",
});
</script>
</body>
</html>Props
| Name | Desc | Example |
|---|---|---|
| mainElement | container id | main |
| displayDots | display dots navigation | true |
| dotsPosition | dots navigation position | "right" |
| animateTime | time to complete scroll animation | 0.7 |
| animateFunction | css transition function | "ease" |
Commands
| Name | Desc |
|---|---|
| yarn install | install dependencies |
| gulp | start development server |
| gulp build | create production build |
Made with ❤️