May 7, 2015

Bouncing Cube

Bouncing Cube

Another experiment on animation keyframes using SCSS. A 3d cuboid bounces with shadow effect.

HTML

<div class="wrap -center">
  <div class="shadow"></div>
  <div class="cube-wrap">
    <div class="cube">
      <div class="front wall"></div>
      <div class="back wall"></div>
      <div class="right wall"></div>
      <div class="left wall"></div>

      <div class="front-right wall"></div>
      <div class="front-left wall"></div>
      <div class="back-right wall"></div>
      <div class="back-left wall"></div>  
    </div>
   </div>
</div>

SCSS

$cube-size: 32px;
$lightb: #d1d5e9;
$darkb: #96a0ce;
$leftb: #b0c2d6;
$rightb: #8a9fb4;
$top: #f8f8fc;
$greyline: #000;

body {
  background: #36373c;
}

.wrap {
  top: 200px;
  margin-left: -50px;
  position: absolute;
  width: 100px;
  
  &.-center{
    left: 50%;
  }
  .cube,
  .cube-wrap,
  .shadow{
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
  }
  .shadow{
    @include animation(shadow 250ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate);
    bottom: -90px;
    height: 32px;
    width: 32px;
  }
  .cube-wrap{
    cursor: pointer;
    @include animation(bounce 250ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate);
  }
  .cube {
    width: $cube-size;
    height: $cube-size;
    position: relative;
    @include transform-style(preserve-3d);
    @include transform(rotateX(-14deg) rotateY(-45deg) rotateZ(0deg));
    

    .wall{
      width: $cube-size;
      height: $cube-size;
      position: absolute;
      transition: all 1s ease-out;
      backface-visibility: hidden;
    }
    .front{
      background: $top;
      @include transform(rotateX(0deg) rotateY(0deg) translateZ($cube-size/2) rotateX(90deg));
      @include transform-origin(50% 100%);
      height: 50%;
      z-index: 1;
    }
    .right{
      height: $cube-size;
      background: $top;
      @include transform-style(preserve-3d);
      @include transform(translateX($cube-size/2) rotateY(90deg) rotateX(90deg));
      @include transform-origin(50% 100%);
      height: 50%;
      z-index: 1;
    }
    .back{
      background: $top;
      @include transform(rotateY(180deg) translateZ($cube-size/2) rotateX(90deg));
      @include transform-origin(50% 100%);
      height: 50%;
    }
    .left{
      background: $top;
      @include transform(translateX(-$cube-size/2) rotateY(-90deg) rotateX(90deg));
      @include transform-origin(50% 100%);
      height: 50%;
    }
    .front-left{
      background: $lightb;
      height: $cube-size;
      @include transform(rotateX(0deg) rotateY(0deg) translateZ($cube-size/2)  translateY($cube-size/2));
      @include transform-origin(50% 100%);
    }
    .front-right{
      background: $darkb;
      height: $cube-size;
      @include transform(translateX($cube-size/2) rotateY(90deg)  translateY($cube-size/2));
      @include transform-origin(50% 100%);
    }
    .back-left{
      background: $leftb;
      height: $cube-size;
      @include transform(rotateX(0deg) translateX(-$cube-size/2) rotateY(-90deg) translateY($cube-size/2));
      @include transform-origin(50% 100%);
    }
    .back-right{
      background: $rightb;
      height: $cube-size;
      @include transform(rotateX(0deg)  rotateY(180deg) translateZ($cube-size/2) translateY($cube-size/2));
      @include transform-origin(50% 100%);
    }
  }
}

@include keyframes(bounce) {
  0% {
    @include transform(translateY( 0 ));
  }
  100% {
    @include transform(translateY( -25px ));
  }
}

@include keyframes(shadow) {
  0% {
    background: rgba(0,0,0, 0.5);
    @include transform(scale( 0.75 ) rotateX(75deg) rotateY(0deg) rotateZ(-45deg));
    box-shadow: 0 0 0px rgba(0,0,0, 0.6);
  }
  100% {
    background: rgba(0,0,0, 0.15);
    @include transform(scale( 1 ) rotateX(75deg) rotateY(0deg) rotateZ(-45deg));
    box-shadow: 0 0 10px rgba(0,0,0, 0.3);
  }
}
demo

No comments:

Post a Comment

Popular Posts

Views