Cross-platform Smooth One Page Scrolling With Pure JavaScript

Category: Animation , Javascript | April 25, 2016
Author: almeida-matheus
Views Total: 3,141
Official Page: Go to website
Last Update: April 25, 2016
License: MIT

Preview:

Cross-platform Smooth One Page Scrolling With Pure JavaScript

Description:

A pure JavaScript / CSS implementation of cross-platform smooth one page scrolling effect with no 3rd dependencies.

Features:

  • Interact with mouse scroll, touch swipe and arrow keys.
  • Smooth scroll between sections.
  • Side navigation.
  • Supports hashtag change event.

How to use it:

Load both stylesheet full-page-scroll.css and JavaScript full-page-scroll.js into your html file.

<link rel="stylesheet" href="full-page-scroll.css">
<script src="full-page-scroll.js"></script>

Add sectioned content to your one page scrolling website.

<div id="main" class="scroll-container">
  <section class="section1">
    <div>
      <span>Section 1</span>          
    </div>
  </section>
  <section class="section2">
    <div>
      <span>Section 2</span>  
    </div>
  </section>
  <section class="section3">
    <div>
      <span>Section 3</span>      
    </div>
  </section>
  <section class="section4">
    <div>
      <span>Section 4</span>      
    </div>
  </section>
  <section class="section5">
    <div>
      <span>Section 5</span>       
    </div>
  </section>
</div>

Create a new instance of fullScroll and done.

new fullScroll({
    // options here
});

Options and defaults.

new fullScroll({

    // parent container
    container : 'main',

    // content section
    sections : 'section',

    // animation speed
    animateTime : 0.7,

    // easing for animation
    animateFunction : 'ease',

    // current position
    currentPosition: 0,

    // display dots navigation
    displayDots: true,

    // where to place the dots navigation
    dotsPosition: 'left'

});

You Might Be Interested In:

One thought on “Cross-platform Smooth One Page Scrolling With Pure JavaScript

Leave a Reply