JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div class="container">
    <div class="wrap">
        <div class="page page1">
            <div class=navContainer>
                <div class="nav left_nav league_nav" id="AFC">AFC</div>
            </div>
            <div class=navContainer>
                <div class="nav left_nav league_nav" id="NFC">NFC</div>
            </div>
        </div>
        <div class="page page2">
            <div class=navContainer>
                <div class="nav left_nav divisions_nav">Placeholder conference</div>
            </div>
            <div class=navContainer>
                <div class="nav left_nav divisions_nav">Placeholder conference</div>
            </div>
            <div class=navContainer>
                <div class="nav left_nav divisions_nav">Placeholder conference</div>
            </div>
            <div class=navContainer>
                <div class="nav left_nav divisions_nav">Placeholder conference</div>
            </div>
        </div>
        <div class="page page3">
            <div class=navContainer>
                <div class="nav left_nav team_nav">Placeholder Team</div>
            </div>
            <div class=navContainer>
                <div class="nav left_nav team_nav">Placeholder Team</div>
            </div>
            <div class=navContainer>
                <div class="nav left_nav team_nav">Placeholder Team</div>
            </div>
            <div class=navContainer>
                <div class="nav left_nav team_nav">Placeholder Team</div>
            </div>
        </div>
        <div class="page page4">
            <div class="left_nav right_nav teamList"></div>
        </div>
    </div>
</div>

CSS

html, body, .ui-page {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}
.container {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 5px auto;
    background: #eeeeee;
    overflow: hidden;
}
.wrap {
    width: 400%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.page {
    width: 25%;
    height: 100%;
    display: block;
    float: left;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.navContainer{
    display: block; position: relative;
    width: 100%; height: 13%;
    margin-top: 10%;
}
.nav {
    width: 80%; height: 100%;
    display: block;
    box-sizing: border-box;
    background-color: blue;
    padding: 4%;
    color: white;
    font-size: 70px;
}
.nav:active {
    -webkit-box-shadow: 8px 24px 14px 3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 8px 24px 14px 3px rgba(0, 0, 0, 0.75);
    box-shadow: 8px 24px 14px 3px rgba(0, 0, 0, 0.75);
}
.left_nav {
    position: absolute;
    right: 0;
    -webkit-box-shadow: 57px 0px 42px -11px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 57px 0px 42px -11px rgba(0, 0, 0, 0.75);
    box-shadow: 57px 0px 42px -11px rgba(0, 0, 0, 0.75);
}
.right_nav {
    margin-top: 10%;
    position: relative;
    margin-left: 0;
    margin-right: auto;
    box-sizing: border-box;
}
.right_shadow_nav {
    display: none;
    position: absolute;
    width: 25%;
    height: 100%;
    bottom: 0;
    left: -25%;
    background-image: linear-gradient(to left, #eeeeee, #bbbbbb);
}
.teamList {
    overflow: scroll;
    height: 90%;
    background-color: #aaaaaa;
    color: #ffffff;
    font-size: 40px;
    margin-top: 10%;
}


.bounceLeft {
  animation-name: bounceLeftAnimation;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
 ...

JavaScript

var leftX = 0;
var nPages = $(".page").size();
var pageSize = $(".page").width();
var threshold = pageSize / 4;
var currentPage = 0;
var mouseStart, wrapLeftPosition, mouseMoveDelta, moving;
var rosters = {
    'ARI': ["Drew Butler", "Carson Palmer", "Drew Stanton", "Logan Thomas", "Chandler Catanzaro", "Dave Zastudil", "Brittan Golden", "Larry Fitzgerald", "John Brown", "Jaron Brown", "Michael Floyd", "Jalen Saunders", "Ted Ginn", "Jonathan Dwyer", "Patrick Peterson", "Tony Jefferson", "Marion Grice", "Jerraud Powers", "Rashad Johnson", "Justin Bethel", "Stepfan Taylor", "Antonio Cromartie", "Tyrann Mathieu", "Kerwynn Williams", "Zach Bauman", "Deone Bucannon", "Andre Ellington", "Robert Hughes", "Eddie Whitley", "Ross Weaver", "Larry Foote", "Kevin Minter", "Desmond Bishop", "Thomas Keiser", "Kenny Demens", "John Abraham", "Glenn Carson", "Alex Okafor", "Daryl Washington", "Marcus Benard", "Jonathan Cooper", "Ted Larsen", "Lyle Sendlein", "Alameda Ta'amu", "Jared Veldheer", "Kelvin Palmer", "Bobby Massie", "Anthony Steen", "Ed Stinson", "Paul Fanaika", "Bruce Gaston", "Earl Watford", "Bradley Sowell", "A Hardy", "Mike Leach", "Rob Housler", "Darren Fells", "Jake Ballard", "Troy Niklas", "John Carlson", "Darnell Dockett", "Matt Shaughnessy", "Dan Williams", "Calais Campbell", "Sam Acho", "Tommy Kelly", "Kaelin Burnett", "Kareem Martin", "Lorenzo Alexander", "Frostee Rucker"],
        'BAL': ["Tyrod Taylor", "Sam Koch", "Joe Flacco", "Justin Tucker", "Keith Wenning", "Kamar Aiken", "Jacoby Jones", "Marlon Brown", "Michael Campanaro", "Jace Davis", "Jeremy Butler", "Marrio Norman", "Lardarius Webb", "Jimmy Smith", "Chykie Brown", "Darian Stewart", "Asa Jackson", "Matt Elam", "Brynden Trawick", "Justin Forsett", "Bernard Pierce", "Will Hill", "Terrence Brooks", "Dominique Franks", "Lorenzo Taliaferro", "Jeromy Miles", "Aaron Ross", "Tramain Jacobs", "Anthony Levine", "Fitzgerald Toussaint", "Kyle Juszczyk", "Morgan Cox", "Nick DiMarco", "Kevin McDermott", "DJ...