🚧 🚧 🚧
This project is no longer supported, please consider using https://github.com/alvarotrigo/fullPage.js/#fullpagejs instead.
https://fullpagescrollpurejs.surge.sh/
Download last version : fullpage.zip or fullpage.tar.gz
<link
rel="stylesheet"
type="text/css"
href="//stylesheet/full-page-scroll.min.css"
/>
<script src="//javascript/full-page-scroll.min.js"></script>
<div id="main" class="scroll-container">
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
</div>
<script type="text/javascript">
new fullScroll({
mainElement: "main",
displayDots: true,
dotsPosition: "left",
animateTime: 0.7,
animateFunction: "ease",
});
</script>
<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">Section 1</section>
<section style="background-color:#555594">Section 2</section>
<section style="background-color:#5992AD">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>
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" |
Name | Desc |
---|---|
yarn install | install dependencies |
gulp | start development server |
gulp build | create production build |
Made with ❤️