Nostalgic ripples

index.html

<div class="ripple_1">
  <div class="ripple_2">
    <div class="ripple_3">
      <div class="ripple_4">
        <div class="ripple_5"></div>
      </div>
    </div>
  </div>
</div>

Nostalgic ripples.markdown

Nostalgic ripples

A collaboration between @tbogdanov80 and myself. He just came to me, showing me this design he made, and asking if I could try to create & animate it. So here it is !

http://bullg.it

A Pen by LukyVJ on CodePen.

License.

script.js

// You can both hover & clic
// 2015 - @tbogdanov80 & @LukyVj
// http://lucasbonomi.com 
// http://bullg.it

style.css

@import "compass/css3";

*{
  box-sizing: border-box;
}

@mixin shadows{
  box-shadow: 0 12px 10px rgba(0,0,0,.3);
}
@mixin shadowsThin{
  box-shadow: 0 6px 5px rgba(0,0,0,.35);
}
@mixin centerer{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

@mixin shape{
  border-radius: 100%;
}

$size: 50vw;

$colors: ( 
  1: #2D1A2A,  
  2: #4E233D, 
  3: #9E4C4A,
  4: #C98962, 
  5: #E2D175
);

body{
  background: #EDEBD8;
}

div{
  @include shadows;
  @include centerer;
  @include shape;
  width: $size;
  height: $size;
  float: left;
  position: absolute;
  background: #2D1A2A;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: popOut 1s linear;
  
  // Fix suggested by @KennyGHanson
  // See : http://codepen.io/LukyVj/details/PwVbOE/#comment-id-85981
backface-visibility: hidden;
perspective: 1000;
// END Fix 
  
  @each $id, $color in $colors {
    [class*="_#{$id}"]{
      width: $size*1.05 - ($id*7.5)*1.09;
      height: $size*1.05 - ($id*7.5)*1.09; 
      background: $color;
      animation: popOut 1s linear $id/10+s;
    }
  }

  &:hover{
    @include shadowsThin;
    transform: translate(-50%,-50%) scale(.95);

    &:active{
      @include shadowsThin;
      transform: translate(-50%,-50%) scale(.9);
    }
  }
}

@keyframes popOut{
  from {
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
  }

  66%{

    transform: translate(-50%,-50%) scale(1.3);
    opacity: 1;
  }

  to{
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
  }
}