JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div id="wrapper">
    <div class="page" id="page1"><div class="content">   
</div></div>
    <div class="page" id="page2"><div class="content"></div></div>
    <div class="page" id="page3"><div class="content"></div></div>
    <div class="page" id="page4"><div class="content"></div></div>
    <div class="page" id="page5"><div class="content"></div></div>
    <div class="page" id="page6"><div class="content"></div></div>
    <div class="page" id="page7" ><div class="content"><br/><br/><br/></div></div>
    <div id="flipwrap">
    <div id="flipper"></div></div>

</div>

CSS

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-touch-callout: none !important;
    -webkit-text-size-adjust: none !important;
    -webkit-user-select: none !important;
}
*:focus {
    outline: none;
}
::-webkit-scrollbar {
    display:none;
}

body{
    background:#aaa;
}
.content{
    width:170px; 
    padding:10px;
    height:200px;
    font-size:12px;

}
#wrapper{
    height:340px;
    width:420px;
    background:#aa1111;
    position:absolute;
    top:50px;
    left:50px;
    border-radius:5px;
    box-shadow: 15px 0 5px rgba(0,0,0,0.1) inset,
        1px 0 5px rgba(0,0,0,0.4) inset,
        25px 0 30px rgba(0,0,0,0.2) inset,
        -25px 0 30px rgba(0,0,0,0.1) inset;
}
.page{
    background:#fff;
    width:190px;
    height:310px;
    position:absolute;
    margin:10px 10px 10px 0 ;
    border:0px solid #000;
    top:3px;
    left:200px;
    margin:10px 0 10px 10px ;
    width:190px;
    max-width:190px;
    border-top-left-radius: 20px 10px;
    border-bottom-left-radius: 20px 10px;
    border-top-right-radius: 50px 5px;
    border-bottom-right-radius: 20px 2px;
    overflow:hidden;
    box-shadow: 5px 0 5px rgba(0,0,0,0.3) inset,
        1px 0 5px rgba(0,0,0,0.4) inset,
        10px 0 4px rgba(255,255,255,0.2) inset,
        25px 0 30px rgba(0,0,0,0.4) inset,
        -25px 0 30px rgba(0,0,0,0.1) inset,
        -1px 0 4px rgba(0,0,0,0.3),
        3px 0 5px rgba(0,0,0,0.5),
                45px 0 45px rgba(255,255,255,0.3) inset;
}
#page2{
    left:205px;
    background-image: url('http://lorempixel.com/300/400/sports/1');
}
#page3{
    left:204px;

    background-image: url('http://lorempixel.com/300/400/sports/2');
}
#page4{
    left:202px;
    background-image: url('http://lorempixel.com/300/400/sports/3');

}
#page5{
    left:200px;

    background-image: url('http://lorempixel.com/300/400/sports/4');
}
#page6{
    left:198px;

    background-image: url('http://lorempixel.com/300/400/sports/5');
}
#page7{
    left:404px;
   ...

JavaScript

$(document).ready(function() {

    function endMove() {
        $(this).removeClass('movable');
    }

    function startMove() {
        $('#flipwrap.movable').on('mousemove', function(event) {
            thisX = event.pageX - $(this).width() + 10;
            thisY = event.pageY - $(this).height();
            cc = ((thisX / -5) + 50).toFixed(2);
            dd = ((30 + (thisX / -10)) * -1 + 1).toFixed(2);
            ff = (15 - (10 + (thisX / -10)) * -1 + 6).toFixed(2);
            gg = ((10 - (thisX / -13)) / 80).toFixed(2);
            if ($('#flipwrap').hasClass('movable')) {
                $('#page7').css({
                    width: 105 - thisX / 2.5,
                    height: 375 - thisX / 4,
                    top: -30 + thisX / 8,
                    left: thisX + 125
                }).css('box-shadow', cc + 'px 0 ' + cc + 'px rgba(0,0,0,0.7), 2px 0 4px rgba(0,0,0,0.5), -2px 0 4px rgba(0,0,0,0.5), -20px 0 40px rgba(0,0,0,0.2), 4px 0 10px rgba(0,0,0,0.1) inset, -2px 0 2px rgba(0,0,0,0.2) inset, ' + dd + 'px 0 ' + ff + 'px rgba(0,0,0,' + gg + ') inset');
                //console.log(cc + '   ' + dd + '  ' + ff + '  ' + gg );
                $('#page6').css({
                    width: 15 + thisX / 1.5
                });
            }
        });
    }

    $("#flipwrap").on('mousedown', function() {
        //e.preventDefault();
        $('#page7').addClass('movable');
        $('#flipwrap').addClass('movable');
        startMove();
        var thisX = event.pageX - $(this).width() + 10,
            thisY = event.pageY - $(this).height(),
            thisXrev = thisX * -4 + 1100;
        console.log(thisXrev);

        $('#page7').animate({
            width: 105 - thisX / 2.5,
            height: 375 - thisX / 4,
            top: -30 + thisX / 8,
            left: thisX + 125
        });
        $('#page6').animate({
            width: 15 + thisX / 1.5
        });
    }).on('mouseup', function() {
        $('#page7').removeClass('movable');
   ...