html {
  min-height: 100vh;
}

html,
body {
	overflow-x: hidden;
}

body {
  height: 100%;
}

.revealer {
  width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 500;
	pointer-events: none;
  top: 50%;
	left: 50%;
  visibility: hidden;
}
.show .revealer {
  visibility: visible;
}
.show .revealer__layer {
	animation: anim-effect-3-1 3s cubic-bezier(0.740, 0.070, 0.340, 0.960) forwards;
}

.revealer__layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: red;
}

@keyframes anim-effect-3-1 {
	0% {
		transform: translate3d(0, 0, 0);
	}
	33%,
	66% {
		transform: translate3d(0, -100%, 0);
	}
	100% {
		transform: translate3d(0, -200%, 0);
	}
}

a.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 200;
  color: #000;
  font-size: 1.2em;
  transform: translateY(-50%) translateX(-50%);
  cursor: default;
}

var widthVal, heightVal, transform;
var revealerWrapper = document.querySelector('.revealer');
var root = document.documentElement;
var showButton = document.querySelector('.btn');

var revealer = function() {
  winsize = { width : window.innerWidth, height : window.innerHeight };

  var pageDiagonal = Math.sqrt(Math.pow(winsize.width, 2) + Math.pow(winsize.height, 2));
  widthVal = heightVal = pageDiagonal + 'px';

  transform = 'translate3d(-50%,-50%,0) rotate3d(0,0,1,45deg) translate3d(0,' + pageDiagonal + 'px,0)';

  revealerWrapper.style.width = widthVal;
  revealerWrapper.style.height = heightVal;
  revealerWrapper.style.WebkitTransform = this.revealerWrapper.style.transform = transform;
};

var clickHandler = function(event) {
    if (root.classList.contains('show')) {
      root.classList.remove('show');
    } else {
      root.classList.add('show');
      revealer();
    }
};

var resizeHandler = function() {
   revealer();
};

window.addEventListener('resize', resizeHandler, false);
document.addEventListener('click', clickHandler, false);

revealer();