JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/mint-choc/jquery-ui.css">
<script src="https://raw.github.com/EightMedia/hammer.js/master/hammer.js"></script>
<ul id="stack">
<li class="active"><p>1</p></li>
    <li><p>2</p></li>
    <li><p>3</p></li>
    <li><p>4</p></li>
    <li><p>5</p></li>
</ul>
<div id="touchBox"></div>
<div id="slider"></div>
<div id="slider2"></div>

CSS

#slider{
    position:relative;
    top:200px;
}

#slider2{
    position:relative;
    top:250px;
}

ul{
    margin:150px 100px 0;
    position:relative;
    /*-webkit-perspective:1000;
    -webkit-transform-style:preserve-3d;*/
}

li {
    position:absolute;
    width:100px;
    height:100px;
    text-align:center;
    -webkit-perspective:1000;
}

li p{
    height:100%;
    background:red;
    line-height:100px;
    -webkit-transform:rotateX(70deg);
    //-webkit-transition:500ms opacity linear;
    box-shadow:0 2px 2px rgba(0,0,0,0.9);
    border-radius:10px;
}

.disappear {
    opacity:0;
}

#touchBox {
    width:300px;
    height:300px;
    background:black;
    position:relative;
    left:300px;
}

JavaScript

var r = 50,
    sideArr = [],
    slideMode = false,
    id = 0,
    activeId = 0,
    up = false,
    down = false;

var hammer = new Hammer(document.getElementById("touchBox"), {
    hold_timeout: 1
});

hammer.onhold = function(ev) {
    slideMode = true;
};
hammer.ondrag = function(ev) {
    console.log(ev.direction);
    if (ev.direction == "down") {
        down = true;
        up = false;
        if (sideArr[activeId - 1].top < -61 && !sideArr[activeId].movingDown) {
            sideArr[activeId - 1].top += 2;
            sideArr[activeId - 1].opacity += 0.03;
            sideArr[activeId].rotation += 2;
            sideArr[activeId].top += 2;
            sideArr[activeId].scale -= 0.005;
            sideArr[activeId + 1].top += (MB / 30);
            sideArr[activeId + 1].scale -= (0.05 / 30);
            if (sideArr[activeId - 1].top > -61) {
                sideArr[activeId - 1].top = -61;
            }
        }
    }
    else {
        down = false;
        up = true;
        if (sideArr[activeId + 1].top > -59 && !sideArr[activeId + 1].movingUp) {
            sideArr[activeId].top -= 2;
            sideArr[activeId].opacity -= 0.06;
            sideArr[activeId + 1].rotation -= 2;
            sideArr[activeId + 1].top -= 2;
            sideArr[activeId + 1].scale += 0.005;
            sideArr[activeId + 2].top -= (MB / 30);
            sideArr[activeId + 2].scale += (0.05 / 30);
            if(sideArr[activeId].top < -119){
                sideArr[activeId].top = -119;
            }
            if (sideArr[activeId + 1].top < -59) {
                sideArr[activeId + 1].top = -59;
            }
        }

    }
}


hammer.onrelease = function() {
    slideMode = false;
}

var MB = 30;

function Sides(ele) {
    this.id = id;
    id++;
    this.ele = ele;
    this.opacity = 1;
    this.scale = 1;
    this.expire = false;
    this.movingUp = false;
    this.movingDown = false;
    var that = this;
    this.move = function() {
        checkMode();
     ...