JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<script src="https://rawgithub.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js"></script>
<script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.container {
    position: relative;
}

.section {
    overflow: hidden;
}

.section:nth-child(1) {
    background-color: red;
}

.section:nth-child(2) {
    background-color: orange;
}

.section:nth-child(3) {
    background-color: yellow;
}

.section:nth-child(4) {
    background-color: green;
}

.section:nth-child(5) {
    background-color: blue;
}

JavaScript

// Grab elements
var $win = $(window);
var $doc = $(document);
var $container = $('.container');
var $sections = $container.children('.section');
var wheelDelta = 0;
var deltaY = 0;

// Make the sections the height of the viewport
$win.on('resize', function () {
    $sections.css({
        height: $win.height()
    });
});
$win.trigger('resize');

var $current = $sections.first();
var scrolling = false;
$win.on('mousewheel', function (event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    var delta = event.deltaY - deltaY;
    var direction = (event.deltaY >= 0)
        ? 'up'
        : 'down';

    deltaY = event.deltaY;
    if (Math.abs(event.deltaY) > 10) {
        debouncedScroll(event);
    }
});

function scroll(event) {
    var direction = (event.deltaY >= 0)
        ? 'up'
        : 'down';
    
    if (!scrolling) {
        var $next;
        if (direction === 'down') {
            $next = $current.next('.section');
        } else {
            $next = $current.prev('.section');
        }
        
        function transition() {
            scrolling = true;
            //console.log('scrolling to', $next.position().top * -1);
            $current = $next;
            $container.animate({
                'margin-top': $next.position().top * -1
            }, {
                easing: 'easeInOutBack',
                duration: 'slow',
                complete: function () {
                    scrolling = false;
                    //console.log('complete');
                }
            });
        }
        
        if ($next.length) {
            transition();
        }
    }
}

var debouncedScroll = $.debounce(100, true, scroll);

/*
var $video = $('<video>', {
    id: 'example_video_1',
    'class': 'video-js vjs-default-skin',
    autoplay: true,
    preload: 'auto',
    loop: true,
    html: '<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" /><source...