MOVE.JS testing

Testing with move.js

by HYEONGJINKIM

HTML

<script src="//cdn.jsdelivr.net/move.js/0.1.1/move.js"></script>
<a href="#" id="playButton">Play</a>
<div id="wrap">
<div class="menu"></div>
<div class="box"></div>
<div id="square"></div>
</div>

CSS

#square {
        border: 1px solid #888;
        width: 100px;
        height: 100px;
        background-color: white;
      }
.box, .menu {
  margin-left: 10px;
  width: 100px;
  height: 100px;
  background: #7C9DD4;
  box-shadow: 5px 5px 0px #D1D1D1;
}
#wrap{
    /*-webkit-perspective: 3000px;
    -webkit-perspective-origin: 50% 50%;*/
}
.menu {
    background: green;
    -webkit-transform: skewX(-30deg) rotateX(-90deg);
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 50%;
}
#playButton {
  display: block;
  font-size: 20px;
  margin: 20px 10px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
}

JavaScript

htEase = {
'in':                'ease-in',
'out':               'ease-out',
'in-out':            'ease-in-out',
'snap':              'cubic-bezier(0,1,.5,1)',
'linear':            'cubic-bezier(0.250, 0.250, 0.750, 0.750)',
'ease-in-quad':      'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
'ease-in-cubic':     'cubic-bezier(0.550, 0.055, 0.675, 0.190)',
'ease-in-quart':     'cubic-bezier(0.895, 0.030, 0.685, 0.220)',
'ease-in-quint':     'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
'ease-in-sine':      'cubic-bezier(0.470, 0.000, 0.745, 0.715)',
'ease-in-expo':      'cubic-bezier(0.950, 0.050, 0.795, 0.035)',
'ease-in-circ':      'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
'ease-in-back':      'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
'ease-out-quad':     'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
'ease-out-cubic':    'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
'ease-out-quart':    'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
'ease-out-quint':    'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
'ease-out-sine':     'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
'ease-out-expo':     'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
'ease-out-circ':     'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
'ease-out-back':     'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
'ease-out-quad':     'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
'ease-out-cubic':    'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
'ease-in-out-sine':  'cubic-bezier(0.445, 0.050, 0.550, 0.950)',
'ease-in-out-expo':  'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
'ease-in-out-circ':  'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
'ease-in-out-back':  'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
}
$.extend(move.ease, htEase);
move.defaults.duration = 1200;
console.log(move);
console.log(move.ease);
//console.log(Move.prototype.translate());
//skewx -20
//rotatex-90
document.addEventListener('click',...