Black & White

Black & White.markdown

Black & White

A Pen by Balint Polgarfi on CodePen.

License.

index.html

<div id="black"></div>
<div id="text">BLACK<br><span>& WHITE</span></div>

script.js

$(window).on("load click resize", function() {
  var $black = $("#black").css("clip", "");
  var w = $(this).width(), h = $(this).height();
  var t = 0, r = w, b = h, l = 0;
  this.tl && tl.stop();
  tl = new TimelineLite();
  l = w/2 - 60;
  tl.to($black, 0.25, {clip: "rect("+[t,r,b,l].join()+")"}, 0.5);
  b = h/2;
  tl.to($black, 0.25, {clip: "rect("+[t,r,b,l].join()+")"});
  r = w/2 + 108;
  tl.to($black, 0.25, {clip: "rect("+[t,r,b,l].join()+")"});
  t = h/2 - 60;
  tl.to($black, 1.75, {clip: "rect("+[t,r,b,l].join()+")", ease: Elastic.easeOut});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
#black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  clip: rect(0 100vw 100vh 0);
}
#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 60px;
  line-height: 60px;
  font-family: "Roboto Condensed";
  text-align: right;
}
#text span {
  color: #000;
}