FlipFlop Scroll

A tiny vanilla JS library to scroll section by section

View example

Getting Started

1. Install FlipFlop Scroll:

npm i flipflop-scroll

2. Include styling, this should override any styling you have on html and body elements:

<link src="flipflop-scroll/flipflop.css"></link>

3. Include and init FlipFlop Scroll:

<script src="pathto/flipflop.js"></script>
<script>
  flipFlop()
</script>

Or do your init in another JS file.

Default options

By default FlipFlop Scroll will use the document.body as the page container, and use semantic 'section' tags as sections to scroll between.

If you wanted three sections with navigation you can add the most basic markup like this:

<div id="flip_flop_nav"></div><!-- Adding this will enable navigation -->

<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>

It's healthy to put the sections directly under the body element, but you can get by without it.

All options

flipFlop({
  container: document.body,                           // Styling will need to be altered drastically when changing the container
  sections: document.getElementsByTagName('section'), // To use a class: document.getElementsByClassName('yourClassHere')
  nav: document.getElementById('flip_flop_nav'),      // Change the nav selector - if it doesn't exist in the markup it won't show
  mouseDrag: false,                                   // Dragging the screen up and down often makes other controls difficult to use
  disableOnMax: 960                                   // Sets minimum pixel width for FlipFloppyness
})

Authors

• Daniel Untiedt - Initial work - Bugbit

[//]: See also the list of contributors who participated in this project.

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details

Issues

For issues, bugs and feature requests please post on the GitHub issues tracker: https://github.com/bugbit-io/flipflop/issues

Acknowledgments

• https://github.com/danro/easing-js/blob/master/easing.js
• http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/