Javascript

【Javascript】スムーズなカードホバーアニメーションCards animation

December 4, 2016
Hover on card to see magic

Cards animationはマウスの位置と動きでカードの動きをアニメーション化

JS

<script src='card.js'></script>

HTML

    <div class="container">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg" class="card" />
      <div class="highlight"></div>
      <div class="overlay">
        <h2>Make</h2>
      </div>
    </div>
<script>
    subscribeCard('.container');
  </script>

CSS

.card {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: 0.15s ease-in-out;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 30px 5px rgba(0, 0, 0, 0.15), 0 10px 40px 10px rgba(0, 0, 0, 0.15);
  }
  .container {
    margin: 1rem;
    padding: 0;
    position: relative;
    width: 17rem;
    height: 22rem;
    float: left;
  }
  .highlight {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient( rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.05) 80%, rgba(0, 0, 0, 0.05));
  }
  .overlay {
    position: absolute;
    top: 5%;
    left: 5%;
    height: 90%;
    width: 90%;
    border: 3px solid red;
    box-sizing: border-box;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.15), 0 0 15px rgba(0, 0, 0, 0.3);
  }