JSFiddle - React, Tailwind, and code Playground

by kanelbula

HTML

<div id="cont">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>

CSS

#cont {
    margin: 100px;  
    background-color: rgba(255,0,0,0.1); 
    position: relative; 
    display: inline-block;    
}
ul {
    font-size:0;
    position: relative;
}
ul li {
    width:80px;
    height:80px;
    display:inline-block;
    background-color: rgba(10,0,255,0.1);
    margin: 0;
    
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

ul li canvas {
    /*-webkit-transition: 0.6s;   */
    -webkit-transform: scale(0.01);  
    -webkit-transform-origin: 50% 50%;  
    /*margin: -40px 0 0 -40px;*/
}

JavaScript

var $cont = $('#cont'),
    $list = $('#cont ul'),
    cw = $cont.width(),
    cw2 = cw / 2,
    iw = $('ul li').eq(0).width(),
    iw2 = iw / 2,
    callbacks = {},
    body = $('body'),
    startX = 0,
    downClientX = 0;

callbacks.md = function(event) {
    startX = event.clientX - $list.position().left;
    downClientX = event.clientX;
    body.on('mousemove', callbacks.mm);

    return false;
};
callbacks.mu = function() {
    body.off('mousemove', callbacks.mm);

    if (downClientX !== event.clientX) {
        snap();
    }

    return false;
};
callbacks.mm = function(event) {
    var d = -(startX - event.clientX);

    d = Math.min(cw2 - iw2, d);
    d = Math.max(-cw2 + iw2, d);

    $list.css('left', d + 'px');
    scale();
};
callbacks.itemclick = function(event) {
    // if mouse has moved do not andle click
    //console.log(downClientX, event.clientX);
    
    if (downClientX !== event.clientX) {
        return false;
    }

    var d = cw2 - $(this).index() * iw - iw2;
    scroll(d, 400);

    return false;
};


var scale = function() {
    $('ul li').each(function() {
        var c = $(this).find('canvas');
        var x = $(this).position().left + $list.position().left;
        var s = 1 - 1.7 * (Math.abs(cw2 - (x + iw2))) / cw2;
        s = Math.max(0.3, s);

        c.css('-webkit-transform', 'scale(' + s + ')');
    });
};

var snap = function() {
    var d = Math.round($list.position().left / iw) * iw;

    scroll(d, 250);
};

var scroll = function(value, duration) {
    $list.animate({
        left: value
    }, {
        duration: duration,
        step: scale,
        easing: $.easing.easeInQuad
    });
};

$('ul li').each(function() {
    var c = $('<canvas width="80" height="80">');
    $(this).append(c).on('click', callbacks.itemclick);

    //get a reference to the canvas
    var ctx = c[0].getContext("2d");

    //draw a circle
    ctx.fillStyle = "#00A308";
    ctx.beginPath();
    ctx.arc(40, 40, 40, 0, Math.PI * 2, true);
   ...