JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="demo">
    
</div>

CSS

body {
    margin: 0;
}
#demo {
    width: 100%;
    height: 100vh;
    background: url(https://picsum.photos/id/756/300/3000) no-repeat;
    background-size: 100%;
}

JavaScript

var Project = function(selector) {
    var self = this;
    var el = $(selector);
    var data = el.data();

    var frontImageSrc = data.image;
    var spriteImageSrc = data.animimage;
   
    this.frameWidth = 0;
    this.frames = 60;
    this.inert = null;
    var dragging = false;
    var X;
    
    var lastUserAction = {};
    
    el.on('mousedown', function(e) {
      dragging = true;
      X = e.pageX;
      clearTimeout(self.inert);
    
      lastUserAction = { event: 'mousedown', ts: new Date().getTime() };
      e.stopPropagation();
      e.preventDefault();
      return false;
    });
    
    el.on('mouseup', function() {
      lastUserAction = { event: 'mouseup', ts: new Date().getTime() };
    })
    
    $(document).on('mouseup', function(e){
      dragging = false;
      self.bucket = 0;
            
      if(Math.abs(self.lastDiff) > 1) {
        var cDiff = self.lastDiff;
        var deceleration = 1;
        var timeout = 5;
      
        self.inert = setTimeout(tick, timeout);
        
        function tick() {
          var dir = cDiff < 0 ? 1 : -1;
          
          cDiff += deceleration * dir;
          self.rotate(cDiff);
          timeout += 2;
          
          if(Math.abs(cDiff) <= deceleration) {
            clearTimeout(self.inert);
          } else {
            self.inert = setTimeout(tick, timeout);
          }
        }
      }
      
      self.lastDiff = 0;
      
      e.stopPropagation();
      e.preventDefault();
      return false;
    })
    
    
    this.bucket = 0;
    this.lastDiff = 0;
    
    $(document).on('mousemove', function(e) {
      if(dragging) {
        var diff = e.pageX - X;
        X = e.pageX;
        
        self.bucket += diff;
        self.lastDiff = diff;
        
        if(Math.abs(self.bucket) > 8) {
          self.rotate(diff);
          self.bucket = 0;
        }
        
        lastUserAction = { event: 'mousemove', ts: new Date().getTime() };
        e.stopPropagation();
       ...