jwietelmann/barcamp_overlay.html

## barcamp_overlay.html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html {
        background-image: url(http://www.barcampnola.com/images/splash.jpg);
        background-size: cover;
      }
      body {
        padding: 0;
        margin: 0;
      }
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      .overlay_image {
        background-image: url(http://media.moddb.com/images/mods/1/15/14859/Mysterious.jpg);
      }
      #temp_overlay {
        background-color: black;
        background-position: center center;
        background-size: 100% 100%;
      }
      #main_overlay {
        /* nothing to do here yet - maybe add perspective? */
        -webkit-perspective: 100px;
      }
      #main_overlay div {
        width: 5%;
        height: 5%;
        background-color: #000;
        float: left;
        background-size: 2000% 2100%; /* 20x21 grid */
        opacity: 1;
        -webkit-transition: opacity .5s ease-in-out;
      }
      @-webkit-keyframes reveal {
        from {
          -webkit-transform: rotate(0) scale(1) rotateX(0) rotateY(0);
        }
        to {
          -webkit-transform: rotate(0) scale(0) rotateX(90deg) rotateY(90deg) rotateZ(90deg);
        }
      }
      #main_overlay div.hidden {
        opacity: 0;
        -webkit-animation: reveal .5s ease-in-out;
      }
    </style>
  </head>
  <body>
    <div id="temp_overlay" class="overlay overlay_image"></div>
    <div id="main_overlay" class="overlay"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://davidbau.com/encode/seedrandom.min.js"></script>
    <script>
      (function(Barcamp) {

        // Swiped this Fisher-Yates array shuffle algorithm from http://stackoverflow.com/a/15127627/28340
        Barcamp.fisherYatesShuffle = function(myArray) {
          // Danger: Math.seedrandom overwrites Math.random to make it generate the same sequence every time.
          // This comes from https://github.com/davidbau/seedrandom
          // It makes sure we always hide the same tiles in the same order.
          Math.seedrandom('barcamp');
          var i = myArray.length, j, tempi, tempj;
          if ( i == 0 ) return false;
          while ( --i ) {
           j = Math.floor(Math.random() * (i + 1));
           tempi = myArray[i];
           tempj = myArray[j];
           myArray[i] = tempj;
           myArray[j] = tempi;
         }
        };

        // Yeah... so a lot of these hard-coded things... maybe shouldn't be.
        Barcamp.buildTiles = function() {
          this.tiles = [];
          for (var i = 0; i < 420; i++) {
            var x = -1 * 100 * (i%20);
            var y = Math.floor(i/20) * -100;
            var position = x + '% ' + y + '%';
            var tile = $('<div>').addClass('overlay_image').css('background-position', position);
            this.tiles.push(tile);
            $('#main_overlay').append(tile);
          }
          this.fisherYatesShuffle(this.tiles);
        };

        // Grab from the front of the list and hide it.
        Barcamp.hideNextTile = function() {
          var tile = this.tiles.shift();
          tile.addClass('hidden');
        };

        // Hide up to `max` tiles.
        Barcamp.hideTiles = function(max) {
          max = Math.min(max, this.tiles.length);
          for(var i = 0; i < max; i++) {
            _this = this;
            var fn = function() { _this.hideNextTile(); };
            setTimeout(fn, 10 * i);
          }
        };

        // GO GO GO GO GO
        Barcamp.init = function() {
          this.buildTiles();

          // Remove hack to keep page hidden until tiles are built.
          $('#temp_overlay').remove();

          // Hack to make transitions work on load.
          var _this = this;
          var fn = function() { _this.hideTiles(250); };
          setTimeout(fn, 0);
        };

      })(window.Barcamp = {});

      $(function() {
        Barcamp.init();
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	html {
	background-image: url(http://www.barcampnola.com/images/splash.jpg);
	background-size: cover;
	}
	body {
	padding: 0;
	margin: 0;
	}
	.overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	}
	.overlay_image {
	background-image: url(http://media.moddb.com/images/mods/1/15/14859/Mysterious.jpg);
	}
	#temp_overlay {
	background-color: black;
	background-position: center center;
	background-size: 100% 100%;
	}
	#main_overlay {
	/* nothing to do here yet - maybe add perspective? */
	-webkit-perspective: 100px;
	}
	#main_overlay div {
	width: 5%;
	height: 5%;
	background-color: #000;
	float: left;
	background-size: 2000% 2100%; /* 20x21 grid */
	opacity: 1;
	-webkit-transition: opacity .5s ease-in-out;
	}
	@-webkit-keyframes reveal {
	from {
	-webkit-transform: rotate(0) scale(1) rotateX(0) rotateY(0);
	}
	to {
	-webkit-transform: rotate(0) scale(0) rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	}
	}
	#main_overlay div.hidden {
	opacity: 0;
	-webkit-animation: reveal .5s ease-in-out;
	}
	</style>
	</head>
	<body>
	<div id="temp_overlay" class="overlay overlay_image"></div>
	<div id="main_overlay" class="overlay"></div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="http://davidbau.com/encode/seedrandom.min.js"></script>
	<script>
	(function(Barcamp) {

	// Swiped this Fisher-Yates array shuffle algorithm from http://stackoverflow.com/a/15127627/28340
	Barcamp.fisherYatesShuffle = function(myArray) {
	// Danger: Math.seedrandom overwrites Math.random to make it generate the same sequence every time.
	// This comes from https://github.com/davidbau/seedrandom
	// It makes sure we always hide the same tiles in the same order.
	Math.seedrandom('barcamp');
	var i = myArray.length, j, tempi, tempj;
	if ( i == 0 ) return false;
	while ( --i ) {
	j = Math.floor(Math.random() * (i + 1));
	tempi = myArray[i];
	tempj = myArray[j];
	myArray[i] = tempj;
	myArray[j] = tempi;
	}
	};

	// Yeah... so a lot of these hard-coded things... maybe shouldn't be.
	Barcamp.buildTiles = function() {
	this.tiles = [];
	for (var i = 0; i < 420; i++) {
	var x = -1 * 100 * (i%20);
	var y = Math.floor(i/20) * -100;
	var position = x + '% ' + y + '%';
	var tile = $('<div>').addClass('overlay_image').css('background-position', position);
	this.tiles.push(tile);
	$('#main_overlay').append(tile);
	}
	this.fisherYatesShuffle(this.tiles);
	};

	// Grab from the front of the list and hide it.
	Barcamp.hideNextTile = function() {
	var tile = this.tiles.shift();
	tile.addClass('hidden');
	};

	// Hide up to `max` tiles.
	Barcamp.hideTiles = function(max) {
	max = Math.min(max, this.tiles.length);
	for(var i = 0; i < max; i++) {
	_this = this;
	var fn = function() { _this.hideNextTile(); };
	setTimeout(fn, 10 * i);
	}
	};

	// GO GO GO GO GO
	Barcamp.init = function() {
	this.buildTiles();

	// Remove hack to keep page hidden until tiles are built.
	$('#temp_overlay').remove();

	// Hack to make transitions work on load.
	var _this = this;
	var fn = function() { _this.hideTiles(250); };
	setTimeout(fn, 0);
	};

	})(window.Barcamp = {});

	$(function() {
	Barcamp.init();
	});
	</script>
	</body>
	</html>