Skip to content
This repository has been archived by the owner on Aug 12, 2022. It is now read-only.

Latest commit

 

History

History
105 lines (82 loc) · 2.7 KB

README.md

File metadata and controls

105 lines (82 loc) · 2.7 KB

🚧 🚧 🚧

This project is no longer supported, please consider using https://github.com/alvarotrigo/fullPage.js/#fullpagejs instead.

Fullpage Scrolling with Vanilla JavaScript DEPRECATED

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>Section 1</section>
  <section>Section 2</section>
  <section>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">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>

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 ❤️