[CSS]拡大表示する際、CSS3でぼよよ～んとしたアニメーションを加えるチュートリアル

サムネイルを拡大表示する際など、単にズームするだけでなくCSS3を使ってバウンドのアニメーションを加えるスタイルシートのチュートリアルを紹介します。

Showing Image With Bounce Effect

[ad#ad-2]

• デモ
• 実装

デモ

デモは左下の十字ボタンをクリックしてください。

デモページ

[ad#ad-2]

十字ボタンをクリックすると、パネルがスライド表示され、各アイテムをクリックすると、バウンドのアニメーションを伴って、ぼよよ～んと拡大表示されます。

デモページ

実装

HTML

中央に配置する領域をdiv要素で確保し、スライドするパネルはdiv要素で、各アイテムはリスト要素で実装します。

<div id="item-receiver"></div>
<div id="thumbnail-wrapper">
  <img src="images/plus.png" id="plus" width="60">
<ul class="item-list">
<li><img class="item" src="images/item/craftertees.jpg" width="70"></li>
<li><img class="item" src="images/item/gene.jpg" width="70"></li>

    <!-- To n image -->
  </ul>
</div>

CSS

パネルや各アイテムのスタイルを定義します。

#thumbnail-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 90px;
  background: #f1f1f1;
  text-align: left;
  padding: 10px 15px;
  box-shadow: 0px 0px 10px #ccc;
  width: 60px;
}

  #plus {
    float: left;
    margin-top: 1em;
    cursor: pointer;
    transition: .2s ease-in-out;
  }

    .clicked {
      transform: rotate(45deg);
    }
.item-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: none;
}

  .item-list li {
    display: inline-block;
    margin-left: 1em;
  }

    .item {
    cursor: pointer;
    transition: .2s ease-in-out;
    }

    .item:hover {
      box-shadow: 0 0 10px #aaa;
      transform: scale(1.02);
    }
#item-receiver {
  display: block;
  text-align: left;
  margin-bottom: 7em;
}

  #item-receiver img {
    display: inline-block;
    margin: 0 0 2em 2em;
    width: 205px;
    box-shadow: 5px 9px 5px rgba(0,0,0,.3);
  }

バウンドのアニメーションは「scale」を使用します。
キーフレームを使い、最初に一番大きくし、元より小さくし、ちょっとだけ大きくし、実寸大にします。

@keyframes show{
  0% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(0.9);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
.show {
  animation: show 0.5s ease-in;
}

JavaScript

jQueryを使用して、トリガーとなるクリックイベントを設定します。

itemReceiver = $('#item-receiver');

$('.item').on('click', function() {

  //Scroll to bottom if overflowing the page height
  $('body').animate({ scrollTop: $(document).height() }, 1000);

  //Add to itemReceiver with bouncing effect
  $(this).clone().appendTo(itemReceiver).addClass('show');

});