Carousel

Carousel.markdown

Carousel

Experimenting with some 2.5d animation technique

A Pen by Noah Blon on CodePen.

License.

index.html

<div id="contain">
  <div class='wrap' id='wrap1'>
    <div class='ball' id='ball1'></div>
  </div>

  <div class='wrap' id='wrap2'>
    <div class='ball' id='ball2'></div>
  </div>
  
  <div class='wrap' id='wrap3'>
    <div class='ball' id='ball3'></div>
  </div>
  
  <div class='wrap' id='wrap4'>
    <div class='ball' id='ball4'></div>
  </div>

</div>

style.scss

$ANIMATION_DURATION: 1000ms; 
$BALL_DIAMETER: 50px;
$TRANSLATE_DISTANCE: 100px;
$SCALE_DIFF: .5;

#contain {
  width: $BALL_DIAMETER + $TRANSLATE_DISTANCE; 
  height: $BALL_DIAMETER;
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  margin: auto;
  opacity: 0;
  animation: fadeIn 1s 1;
  animation-fill-mode: forwards;
}

.wrap {
  animation: translate $ANIMATION_DURATION infinite ease-in-out alternate, zindex ($ANIMATION_DURATION * 2) infinite ease-in-out;
  position: absolute;
}

.ball { 
  width: $BALL_DIAMETER;
  height: $BALL_DIAMETER;
  box-shadow: 0 ($BALL_DIAMETER * -.125) 0 rgba(0,0,0,.15) inset;
  background-color: #E3746B;
  border-radius: 50%;
  animation: scale $ANIMATION_DURATION infinite ease-in-out alternate;
  animation-delay: -($ANIMATION_DURATION/2);
  transform: scale(1 - $SCALE_DIFF);
  border: 2px solid black;
}

// The Shadow
.ball:after {
  content: '';
  width: $BALL_DIAMETER;
  height: 13px;
  background: #eee;
  position: absolute;
  top: $BALL_DIAMETER * 1.4;
  border-radius: 50%;
}

#wrap2 {
  animation-delay: $ANIMATION_DURATION * -1;
}

#ball2 {
  background-color: #397BF9;
  animation-delay: $ANIMATION_DURATION * -1.5;
}

#wrap3 {
  animation-delay: $ANIMATION_DURATION * -1.5;
}

#ball3 {
  background-color: #F4B400;
  animation-delay: $ANIMATION_DURATION * -2;
}

#wrap4 {
  animation-delay: $ANIMATION_DURATION * -2.5;
}

#ball4 {
  background-color: #0F9D58;
  animation-delay: $ANIMATION_DURATION * -3;
}

@keyframes translate {
  100% { transform: translateX($TRANSLATE_DISTANCE); }
}

@keyframes scale {
  100% { transform: scale(1); }
}

@keyframes zindex {
  25% { z-index: 1; }
  75% { z-index: -1; }
}

@keyframes fadeIn { 100% { opacity: 1; } }