Author: | almeida-matheus |
---|---|
Views Total: | 15,071 views |
Official Page: | Go to website |
Last Update: | May 1, 2019 |
License: | MIT |
Preview:

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' });
Changelog:
2019/05/01
- fixing dots classes
its cool!