animated level transition - circles

using jquery; fully responsive; customizable

by Ercan Cicek

HTML

<div class="circle-anim-parent">
  <span class="circle-anim-text">Level Unlocked!</span>
  <div class="circle-anim-filledCircle"></div>
  <div class="circle-anim-dashedCircle"></div>
  <canvas class="circle-anim-outerCircle"></canvas>
</div>

CSS

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

.circle-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 */
}
@-webkit-keyframes animFadeOut {
  100% {
    opacity: 0;
  }
}
@keyframes animFadeOut {
  100% {
    opacity: 0;
  }
}

.circle-anim-text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.5em;
  -webkit-transform: translate(-50%, -50%);  
  -ms-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 16777271; /* max z-index (for Safari 1-3) */
  color: white;
  -webkit-animation-fill-mode: forwards !important;  
  animation-fill-mode: forwards !important;
}

@-webkit-keyframes animText {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animText {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.circle-anim-filledCircle {
  position: absolute;
  top: 50%;
  left: 110%; /* starting pos */
  width: 10em;
  height: 10em;
  border-radius: 50%;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
  -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

@keyframes animFilCirc {
  25% {
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(10);
    -ms-transform: translate(-50%, -50%) scale(10);
    transform: translate(-50%, -50%) scale(10);
  }
}

.circle-anim-dashedCircle {
  position: absolute;
  top: 50%;
  left: -13em; /* starting pos */
  width: 13em;
  height: 13em;
  border-radius: 50%;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
  -webkit-transform:...

JavaScript

// --- customizable animation stages & colors
var animStartTime = 3, // -- in sec
    animStayTime = 2, // -- in sec
    animEndTime = 0.5, // --- in sec
    animCol = "orange"; // --- hex or string

  $(initAnim);

  function initAnim() {
    $("body").append("<style>.circle-anim-filledCircle { background-color:" + animCol + "; } .circle-anim-dashedCircle { border: 6px dashed " + animCol + "; }</style>");
    setCircleAnimCanvas(); // --- init canvas arc
    $(window).resize(setCircleAnimCanvas); // --- to resize canvas arc
    animationStart();
  }

  function setCircleAnimCanvas() {
    var wndw = { 
          w: $(".circle-anim-outerCircle").width(), 
          h: $(".circle-anim-outerCircle").height() 
        },
    		canvas = $(".circle-anim-outerCircle")[0],
        context = canvas.getContext('2d');
    canvas.width = wndw.w;
    canvas.height = wndw.h;

    function drawCircle(startAngle, endAngle) {
      context.beginPath();
      context.arc(canvas.width / 2, canvas.height / 2, (wndw.h >= wndw.w ? wndw.w / 2.1 : wndw.h / 2.1), startAngle, endAngle, false);
      context.lineWidth = 10;
      context.strokeStyle = animCol;
      context.stroke();
      context.closePath();
    }

		// --- the two quarter circles
    drawCircle(0, 0.5 * Math.PI);
    drawCircle(Math.PI, 1.5 * Math.PI);
  }

  function animationStart() {
    $(".circle-anim-parent").removeClass("deepHide");
    $(".circle-anim-text").css({
    	"-webkit-animation": "animText " + animStartTime + "s ease-out",
      "animation": "animText " + animStartTime + "s ease-out"
    });
    $(".circle-anim-filledCircle").css({
    	"-webkit-animation": "animFilCirc " + animStartTime +"s ease",
      "animation": "animFilCirc " + animStartTime +"s ease"
    });
    $(".circle-anim-dashedCircle").css({
    	"-webkit-animation": "animDashCirc " + animStartTime + "s ease",
      "animation": "animDashCirc " + animStartTime + "s ease"
    });
    $(".circle-anim-outerCircle").css({
   ...