Разрушение страницы/ Page destroy

Скрипт разрушение страницы на осколки

by twobomb three

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <h2>Кликни на любое место в которое все провалится...</h2>
  <table><tbody><tr>
    <td>Пример 1</td>
    <td>Пример 2</td>
    <td>Пример 3</td>
    <td>Пример 4</td>
  </tr>
  <tr>
    <td>Пример 1</td>
    <td>Пример 2</td>
    <td>Пример 3</td>
    <td>Пример 4</td>
  </tr>
  <tr>
    <td>Пример 1</td>
    <td>Пример 2</td>
    <td>Пример 3</td>
    <td>Пример 4</td>
  </tr>
  <tr>
    <td>Пример 1</td>
    <td>Пример 2</td>
    <td>Пример 3</td>
    <td>Пример 4</td>
  </tr>
  <tr>
    <td>Пример 1</td>
    <td>Пример 2</td>
    <td>Пример 3</td>
    <td>Пример 4</td>
  </tr></tbody></table>

<div class="mytest1">Lorem ipsum dolor sit amet.</div>
<div class="mytest1">Lorem ipsum dolor sit amet.</div>
<div class="mytest1">Lorem ipsum dolor sit amet.</div>
<h1>hello word</h1>

CSS

body{
  background:green;
}
h2{
  margin:0;
}
.mytest1{
  margin:20px;
  background:gray;
  border-radius:20px;
  padding:10px;
  border:2px solid blue;
}
table{
  border-collapse:collapse;
  border:2px solid black;
}
td{
  border:1px solid black;  
}


html,body{
  height:100%;
}
body {
    margin: 0;
    overflow: hidden;
}
canvas {
    position: absolute;
	
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

JavaScript

const TWO_PI = Math.PI * 2;


var image = new Image(),
    imageWidth = window.innerWidth,
    imageHeight = window.innerHeight;

var vertices = [],
    indices = [],
    fragments = [];

var container,clickPosition = [];

window.onload = function() {
   html2canvas(document.body).then(canvas => {
    render(canvas.toDataURL());
  }); 
		
}
function render(src){
		document.body.innerHTML = '<div id="container"></div>';
    document.body.style.background = "none";
 		container = document.getElementById('container');
    container.style.position = "absolute";
    container.style.width = "100%";
    container.style.height = "100%";
    container.style.left = "0";
    container.style.right = "0%";
    TweenMax.set(container, {perspective:500});
    image.src = src;
    image.style.position = "absolute";
    image.onload = function(){
    
    image.addEventListener('click', imageClickHandler);
    container.appendChild(image);
    }
};


function imageClickHandler(event) {
    var box = image.getBoundingClientRect(),
        top = box.top,
        left = box.left;

    clickPosition[0] = event.clientX - left;
    clickPosition[1] = event.clientY - top;

    triangulate();
    shatter();
}

function triangulate() {
    var rings = [
            {r:50, c:12},
            {r:150, c:12},
            {r:300, c:12},
            {r:1200, c:12} // very large in case of corner clicks
        ],
        x,
        y,
        centerX = clickPosition[0],
        centerY = clickPosition[1];

    vertices.push([centerX, centerY]);

    rings.forEach(function(ring) {
        var radius = ring.r,
            count = ring.c,
            variance = radius * 0.25;

        for (var i = 0; i < count; i++) {
            x = Math.cos((i / count) * TWO_PI) * radius + centerX + randomRange(-variance, variance);
            y = Math.sin((i / count) * TWO_PI) * radius + centerY + randomRange(-variance, variance);
            vertices.push([x, y]);
        }
    });

   ...