クリックでCSSのアニメーションを実行させるメモ

今回もメモでスイマセン。少しでも、新しいサイトがチョットした楽しみになればなーと思って小細工しました。
そのメモです。

CSS3で作ったアニメーションをクリックで発動させる

前回と同様に若干自己満足の一種ですが、小さなアクションをつけてるECサイトはあまり無いので、チョットした面白さになるかな？と思ってやってクリックでアニメーションを実行させてみました。
当店のECサイトはコチラ＞＞https://www.u-hg.com/category/item/

ワリと簡単な方法で実行しています。

スタイルシートにアニメーションを定義

まずはCSSでアニメーションを作ります。
今回、僕が作ったのは1度潰れて上にスライドするアニメーション。
コードはこんな感じです。

@-webkit-keyframes clup {
  0% {opacity: 1;-webkit-transform: scale3d(1.1, .5, .5); transform: scale3d(1.1, .5, .5);}
  50% {opacity: 1;-webkit-transform: scale3d(.9, 1, 1); transform: scale3d(.9, 1, 1);}
  100% {opacity: .1; -webkit-transform: translate3d(0, -500%, 0);transform: translate3d(0, -500%, 0);}
  }
@keyframes clup {
  0% {opacity: 1;-webkit-transform: scale3d(1.1, .5, .5); transform: scale3d(1.1, .5, .5);}
  50% {opacity: 1;-webkit-transform: scale3d(.9, 1, 1); transform: scale3d(.9, 1, 1);}
  100% {opacity: .1; -webkit-transform: translate3d(0, -500%, 0);transform: translate3d(0, -500%, 0);}
  }
.clup {
  -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom;
  -webkit-animation-name: clup;animation-name: clup;
  -webkit-animation-duration: 1s;animation-duration: 1s;
  opacity: .1;
}

実行例はこんな感じです。

これはhoverでCSSを書いてあるのでマウスを乗せると発動しますが、対象がすぐにマウスから離れるので動きが変です(汗)
で、ひとまずCSSは完成。

javascriptで要素を追加

次はsctiptでクリックした時に先ほどの要素を追加します。

<script type="text/javascript">
jQuery(function() {
jQuery('.snp img').on('click', function(){
    jQuery(this).toggleClass('clup');
});
});
</script>

コレでsnpというクラスのイメージタグにclupの要素を追加します。ワードプレスの場合は頭がjQueryになるので、その点他と少し違いますね。
で、toggleClassが付いたのが↓

今度はクリックすると発動するようになっています。

使い方は色々

ECサイトだと、あまり使いすぎるとウザいので微妙ですが、趣味のブログや、アーティストさん、デザイナーさんには使える用途が多いのかもですね。
簡単なサンプルですが、例えば

(↑クリックすると動く)
とか

(右上のトラックをクリックすると動く)
とか。

凄い人のCSSってもはやCSSと思えないくらいで驚きましたが、CSS3になって面白いかも？って思えるようになりました。

---

---