JSFiddle - React, Tailwind, and code Playground

by Nikita Ahenbrenner

HTML

<div class="page-content">
  <section id="section1" class="sppb-section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium placeat nulla ad eum ex aliquam, ipsa facilis consequatur hic aspernatur quae dolor molestias nobis commodi corrupti, eaque unde, rerum velit.
    </p>
  </section>
  <section id="section2" class="sppb-section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium placeat nulla ad eum ex aliquam, ipsa facilis consequatur hic aspernatur quae dolor molestias nobis commodi corrupti, eaque unde, rerum velit.
    </p>
  </section>
  <section id="section3" class="sppb-section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium placeat nulla ad eum ex aliquam, ipsa facilis consequatur hic aspernatur quae dolor molestias nobis commodi corrupti, eaque unde, rerum velit.
    </p>
  </section>
  <section id="section4" class="sppb-section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium placeat nulla ad eum ex aliquam, ipsa facilis consequatur hic aspernatur quae dolor molestias nobis commodi corrupti, eaque unde, rerum velit.
    </p>
  </section>
  <section id="section5" class="sppb-section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium placeat nulla ad eum ex aliquam, ipsa facilis consequatur hic aspernatur quae dolor molestias nobis commodi corrupti, eaque unde, rerum velit.
    </p>
  </section>
  <section id="section6" class="sppb-section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium placeat nulla ad eum ex aliquam, ipsa facilis consequatur hic aspernatur quae dolor molestias nobis commodi corrupti, eaque unde, rerum velit.
    </p>
  </section>
  <div>

CSS

section {
  z-index: 1;
  height: 100vh;
  width: 100%;
  height: 100vh;
  bottom: 0;
}

JavaScript

(function (global,factory) {
	"use strict";
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module.
		define(['jquery'], function($) {
			return factory($, global, global.document);
		});
	} else if (typeof module === 'object' && module.exports) {
		// Node/CommonJS
		module.exports = function( root, jQuery ) {
			if ( jQuery === undefined ) {
				// require('jQuery') returns a factory that requires window to
				// build a jQuery instance, we normalize how we use modules
				// that require this pattern but the window provided is a noop
				// if it's defined (how jquery works)
				if ( typeof window !== 'undefined' ) {
					jQuery = require('jquery');
				} else {
					jQuery = require('jquery')(root);
				}
			}
			factory(jQuery, global, global.document);
			return jQuery;
		};
	} else {
		// Browser globals
		factory(jQuery, global, global.document);
	}
}(typeof window !== 'undefined' ? window : this, function ($, window, document, undefined) {
	"use strict";
	var heights = [],
		names = [],
		elements = [],
		overflow = [],
		index = 0,
		currentIndex = 0,
		interstitialIndex = 1,
		hasLocation = false,
		timeoutId,
		timeoutId2,
		$window = $(window),
		top = $window.scrollTop(),
		scrollable = false,
		locked = false,
		scrolled = false,
		manualScroll,
		swipeScroll,
		util,
		disabled = false,
		scrollSamples = [],
		scrollTime = new Date().getTime(),
		firstLoad = true,
		initialised = false,
		destination = 0,
		wheelEvent = 'onwheel' in document ? 'wheel' : document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll',
		settings = {
			//section should be an identifier that is the same for each section
			section: ".page-content",
			sectionName: "section-name",
			interstitialSection: "",
			easing: "easeOutExpo",
			scrollSpeed: 1100,
			offset : 0,
			scrollbars: true,
			target:"html,body",
			standardScrollElements: false,
			setHeights: false,
			overflowScroll:false,
			before:function()...