リンクを表示するとスタンプが押されるCSSアニメーション

2020.09.232020.10.27

今回は「押すのが心地よいリンク」というのを考えてみました。

それが、画面に表示すると、スタンプが押されるアニメーションです。

まぁ、実際に押すかは別問題ですが…笑

枠の中にマウスをポイントしてみてください。

どうでしょうか？　押したくなります？

1. HTMLコード

ポイントは、my-stampとstamp2というクラスです。

my-stampが枠全体、stamp2が中のイラストを指しています。

<figure class="wp-block-image size-large is-resized my-stamp">
 読んだよ 
<a href="">
<img src="https://chiilabo.com/wp-content/uploads/2020/09/illustkun-00173-smartphone-kids-300x300-1.png" alt="スマホを見る女の子" class="stamp2 wp-image-8151" width="150" height="150"/></a>
</figure>

目次に戻る

1-1. CSS

ここでのポイントはmy-stamp-onというクラスです。これは、後でjavascriptでimgにクラスを追加します。

my-stamp-onのクラスが追加されると、アニメーションが動き続けます。

figure.my-stamp {
    border: 1px solid #ccc;
    position: relative;
    width: 150px;
    height: 150px;
    margin: 20px auto 20px;
  padding: 10px;
    font-size: 20px;
    text-align: center;
}
.my-stamp img.stamp2  {
	display: inline-block;
	color: #c00;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.0;
	border: 1px solid #c00;
	border-radius: 50%;
	padding: 20px;
	/* スタンプアニメーションのための初期値 */
	visibility:hidden;
        animation: sample_anime02 2s paused both;
}
.my-stamp-on img.stamp2 {
  animation-play-state: running;
}

@keyframes sample_anime02 {
  0% {
       visibility:visible;
	opacity: 0;
	transform:  rotate(-30deg) scale(2.5);
  }
  30% {
       visibility:visible;
	opacity: 0.8;
	transform:  rotate(5deg) scale(1.04);
  }
  100% {
       visibility:visible;
	opacity: 1.0;
	transform: rotate(0deg);
  }
}

目次に戻る

1-2. Javascript

my-stampクラスの要素にマウスが乗ると、関数が実行されてクラスが追加されるようになっています。追加されたクラスを消す処理を省いてるので、一度ポイントされると一回だけアニメーションされることになります。

$(".my-stamp").hover(function() {
  $(this).addClass("my-stamp-on");
},

今回は、マウスをポイントしたらアニメーションを開始しました。

目次に戻る

2. スマホとhoverは合っていないかも

スマホだとリンクをポイントすることがないので、画面内に表示されたらアニメーションを開始するのもありです。

その場合のJavascriptは

<script>
	$(window).scroll(function() {
  var windowH = $(window).height(),
  scrollY = $(window).scrollTop();
  $('.my-stamp').each(function() {
    var elPosition = $(this).offset().top;
    if (scrollY > elPosition - windowH * 0.7) {
      $(this).addClass("my-stamp-on");
    }
  });
});
</script>

0.7の数字をいじると、画面のどのあたり(0:上端、1:下端)でアニメーションが開始するかを変えられます。あんまり、下だと見えた頃にはアニメーションが終わっていたりするので、微調整が大事ですね。

こちらもどうぞ