参考サイトのような斜めに背景色が反転するアニメーションの実装方法をしたい

Question

当該参考サイトのように、ファーストビューで斜めに亀裂が入り、背景色が反転していってサイト全体が現れるようなアニメーションの実装をしたいです。
参考サイト

参考サイトのソースを見ても、どういった方法を用いているのかいまいちわかりかねます。
何かしらのJS・jQuery・CSSのライブラリを使っているのか、あるいはフルスクラッチで書いているのか。

具体的な実装方法をご教授いただけましたら幸いです。もし何かしらのライブラリ等を使っているようなら、そのライブラリ名など教えていただけますでしょうか。

よろしくお願いします。

Answer 1

<div id=box1></div>
<div id=box2></div>
aiueo

* {
  margin: 0;
  padding: 0;
  color: #FFF;
  text-shadow:1px 1px 0 #000, -1px -1px 0 #000,-1px 1px 0 #000, 1px -1px 0 #000,0px 1px 0 #000,  0-1px 0 #000,-1px 0 0 #000, 1px 0 0 #000
}
div {
  width: 200vw;
  height: 75vh;
  position:fixed;
  background: black;
  z-index: -100
}
#box1 {
  top: -25vh;
  left: -50vw;
  transform-origin:25% 100% 0;
  transform: rotate(-30deg);
}
#box2 {
  bottom: -25vh;
  left: -50vw;
  transform-origin:25% 0 0;
  transform: rotate(30deg)
}

var i=0;
function go(){
  $('#box1').css('transform','rotate(' + (30 - i) + 'deg)');
  if(i<61) {
    $('#box2').css('transform','rotate(' + (30 + i) + 'deg)');
  }
  i++;
  if(i>120){
    clearInterval(hoge);
  }
}
var hoge = setInterval(go,10);

サンプル

Comments

[kyoya0819]

思いつきで書いているので、適当さはあしからず。
大体、参考サイトに似せるように作っています。（開く方法が違うくらい）
自分でもわかりづらい記述をしていると思うのでわからないところがあればコメントしていただければ幸いです。

[kojirooooooo]

ありがとうございます、取り急ぎコード確認し、参考にさせていただきます。