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

amendoa/fullPageScrollPureJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚧 🚧 🚧

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