JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/delaunay.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
<div id="container"></div>

CSS

body {
    background-color: #000;
    margin: 0;
    overflow: hidden;
}
canvas {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
img {
    position: absolute;
    -webkit-transition:opacity .3s;
    transition:opacity .3s;
}
#container {
    position: absolute;
    width: 768px;
    height: 432px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

JavaScript

// triangulation using https://github.com/ironwallaby/delaunay

// For more check out zachsaucier.com

const TWO_PI = Math.PI * 2;

var images = [], 
    imageIndex = 0;

var image,
    imageWidth = 768,
    imageHeight = 485;
 
var vertices = [],
    indices = [],
    prevfrag = [],
    fragments = [];

var margin = 50;

var container = document.getElementById('container');

var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];

window.onload = function() {
    TweenMax.set(container, {perspective:500});

    // images from http://www.hdwallpapers.in
    var urls = [
            'http://i.imgur.com/QddsEpk.jpg',
            'http://i.imgur.com/OeDykaH.jpg',
            'http://i.imgur.com/lLHspCj.jpg',
            'http://i.imgur.com/tCz9GQS.jpg'
        ],
        image,
        loaded = 0;
    // very quick and dirty hack to load and display the first image asap
    images[0] = image = new Image();
        image.onload = function() {
            if (++loaded === 1) {
                
                for (var i = 1; i < 4; i++) {
                    images[i] = image = new Image();

                    image.src = urls[i];
                } 
                placeImage();
            }
        };
        image.src = urls[0]; 
};

function placeImage(transitionIn) {
    image = images[imageIndex];

    if (++imageIndex === images.length) imageIndex = 0;
  
    var num = Math.random();
    if(num < .25) {
      image.direction = "left";
    } else if(num < .5) {
      image.direction = "top";
    } else if(num < .75) {
      image.direction = "bottom";
    } else {
      image.direction = "right";
    }

    container.appendChild(image);
    image.style.opacity = 0;
  
    if (transitionIn !== false) {
        triangulateIn();
    }
}

function triangulateIn(event) {
    var box = image.getBoundingClientRect(),
        top = box.top,
        left = box.left;
  
    if(image.direction == "left") {
      clickPosition[0] = 0; 
      clickPosition[1] =...