<main data-state="0"></main>
<button onclick="animatePieces(1)">Animation 1</button>

body {
  --c1: #eaeaea;
  --c2: #333;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--c2);
  overflow: hidden;
}

main {
  border: 5px solid var(--c1);
  display: flex;
  overflow: hidden;
  margin-bottom: 20px;
  min-width: 200px;
  min-height: calc(200px / 1.7);
}

.slice {
  transition: 0.25s;
  z-index: 1;
}

/* Decoration */

.slice:hover {
  z-index: 2;
  transform: scale(1.1);
  box-shadow: 0 0 5px 1px rgba(0,0,0,0.7);
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--c1);
  color: var(--c1);
  padding: 10px 50px;
  border-radius: 50px;
  background: transparent;
  cursor: pointer;
  transition: 0.25s;
  outline: none;
  font-weight: 100;
}

button:hover {
  background: var(--c1);
  color: var(--c2);
  border-color: var(--c1);
}

main:empty::before {
  content: "\00af \005c \005f \30C4 \005f \002f \00af";
  color: var(--c1);
  width: 200px;
  height: calc(200px / 1.7);
  line-height: calc(200px / 1.7);
  text-align: center;
  position: absolute;
}

window.onload = function() {
  var demoImageWidth = 400,
    useRandomImage = true,
    image = new Image(),
    imageSource;

  setImageSource = function() {
    if (!useRandomImage) {
      imageSource = prompt("Image URL");
    }
    if (useRandomImage || imageSource == null || imageSource.length == 0) {
      console.log("a random image was loaded");
      imageSource =
        "https://source.unsplash.com/random/" +
        demoImageWidth +
        "x" +
        demoImageWidth / 1.7 +
        "";
    }
  };
  setImageSource();
  image.setAttribute("crossOrigin", "anonymous");
  image.src = imageSource;
  image.onload = function() {
    cutImageUp();
  };
  function cutImageUp() {
    var imageHeight = image.naturalHeight,
      imageWidth = image.naturalWidth,
      widthOfOnePiece = 50,
      amountOfPieces = imageWidth / widthOfOnePiece,
      numColsToCut = amountOfPieces,
      numRowsToCut = 1,
      heightOfOnePiece = imageHeight / numRowsToCut,
      skewAngle = 0,
      imagePieces = [];
    
    $("main").width(imageWidth);
    
    for (var x = 0; x < numColsToCut; ++x) {
      for (var y = 0; y < numRowsToCut; ++y) {
        var canvas = document.createElement("canvas");
        canvas.width = widthOfOnePiece;
        canvas.height = heightOfOnePiece;
        var context = canvas.getContext("2d");
        context.setTransform(1, Math.tan(skewAngle), 0, 1, 0, 0);
        context.drawImage(
          image,
          x * widthOfOnePiece,
          y * heightOfOnePiece,
          widthOfOnePiece,
          heightOfOnePiece,
          0,
          0,
          canvas.width,
          canvas.height
        );
        imagePieces.push(canvas.toDataURL());
      }
    }
    for (var i = 0; i < amountOfPieces; i++) {
      $("main").append("<div class='slice'></div>");
      $(".slice").width(widthOfOnePiece);
      $(".slice").height(heightOfOnePiece);
      console.log(heightOfOnePiece);
      $(".slice").each(function(i) {
        $(this).css({
          background: "url(" + imagePieces[i] + ")",
          "background-repeat": "no-repeat"
        });
      });
    }
  }
};

/* Decoration */
var animatePieces = function(amimationType) {
  if (amimationType == 1) {
    var i = 0;
    var dest = $(".slice").height();
    if ($("main").attr("data-state") == "0") {
      $("main").attr("data-state", "1");
      $(".slice").each(function(index) {
        i++;
        var delay = i / 20;
        $(this).css({
          transform: "translateY(" + dest + "px",
          "transition-delay": "" + delay + "s"
        });
      });
    } else {
      $(".slice").each(function(index) {
        $("main").attr("data-state", "0");
        $(this).css({
          transform: "",
          "transition-delay": ""
        });
      });
    }
  }
};
$('.slice')