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>
<link rel="stylesheet" href="//vjs.zencdn.net/4.2/video-js.css">
<script src="//vjs.zencdn.net/4.2/video.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');

// 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', $.debounce(100, true, function (event) {
    var direction = (event.originalEvent.wheelDelta >= 0)
        ? 'up'
        : 'down';
    
    //console.log('scroll', scrolling);
    
    if (!scrolling) {
        var $next;
        if (direction === 'down') {
            $next = $current.next('.section');
        } else {
            $next = $current.prev('.section');
        }
        
        function transition() {
            //console.log('scrolling to', $next.position().top * -1);
            $current = $next;
            $container.animate({
                'margin-top': $next.position().top * -1
            }, {
                duration: 'slow',
                complete: function () {
                    //console.log('complete');
                }
            });
        }
        
        if ($next.length) {
            transition();
        }
    }
}));

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 src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /><source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />'
});

var $video2 = $video.clone().attr('id', 'example_video_2');
var $video3 = $video.clone().attr('id', 'example_video_3');
var $video4 = $video.clone().attr('id', 'example_video_4');
var $video5 = $video.clone().attr('id', 'example_video_5');

$video.appendTo($('.section:nth-child(1)'));

videojs('example_video_1', {},...