animated level transition - garage door

using jquery; fully responsive; customizable

by Ercan Cicek

HTML

<div class="garage-anim-parent">
    <div class="garage-anim-garage flex-it">
      <span>Level Unlocked!</span>
      <div class="garage-anim-patternBg"></div>
    </div>
  </div>

SCSS

$bgCol: purple; /* customizable in hex or string */

html, body {
  position: relative;
  width: 100%;
  height: 100%;
}

.garage-anim-parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 16777270; /* max z-index (for Safari 1-3) - 1 */
}

.garage-anim-garage {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 16777270; /* max z-index (for Safari 1-3) */
  background-color: $bgCol;
background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='150px' height='50px' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cg transform='matrix(1,0,0,1.50838,0,6.25)'%3E%3Crect x='0' y='0' width='150' height='24.861' style='fill-opacity:0.341176;'/%3E%3C/g%3E%3Cg transform='matrix(0.866667,0,0,0.703911,10,16.25)'%3E%3Crect x='0' y='0' width='150' height='24.861' style='fill-opacity:0.341176;'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 100%;
  background-size: 10%;
  z-index: 2;
}

.garage-anim-garage > span {
  font-size: 2em;
  color: white;
  z-index: 3;
}

.garage-anim-patternBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='150px' height='150px' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/'...

JavaScript

var startAnimTime = 2000,
    stayTime = 1000,
    endAnimTime = 3000;

$(animationStart);

function animationStart() {
  $(".garage-anim-garage").animate({ "top": 0 }, startAnimTime, stayFn);
}

function stayFn() {
  setTimeout(function() {
    animationEnd();
  }, stayTime);
}

function animationEnd() {
  $(".garage-anim-garage").animate({ "top": -100 + "%" }, startAnimTime);
}