Twitterのハートマーク機能こと「いいね」のエフェクトがどうなっているのか調べてみた

いつもは、何の気無しに使っているTwitterの「いいね」ボタン。

よく見たら、このエフェクト凄く凝っているなと思って、「あわよくば何かに利用出来れば」と、どうやって実装しているのかを、調べてみました。

Twitterハートマークのエフェクト

僕はまた、ハートマークのエフェクトは、アイコンフォントなどに何かしらのエフェクトをかけているのかと思っていました。

けれど、調べてみたら、背景に画像を使って、アニメーションをしているだけでした。

画像の場所は以下。

https://abs.twimg.com/a/1457681967/img/t1/web_heart_animation.png

以下がその画像です。

で、上の画像を用いてCSSでアニメーションをしたのが以下になります。（トリガーはマウスオーバーになっています）

CSSは、以下のようになっています。

.heart {
  width: 100px;
  height: 100px;
  background: url(https://nelog.jp/wp-content/uploads/2016/03/heart_animation.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
}
.heart:hover {
  background-position: -2800px 0;
  -webkit-transition: background 1s steps(28);
  transition: background 1s steps(28);
}

画像を背景画像にセットして、イベントが起きたら（今回はマウスオーバー）したら、背景画像をアニメーションしているだけみたいです。

あとは、表示させたい場所に、以下のように要素を記入するだけです。

<div class="heart"></div>

今回は、簡略化して書きましたが、詳しくは以下にも載っています。

参考 live example on CodePen

星形のエフェクト

あと、いろいろサイトを見ていたら、星形のエフェクトもあったので紹介。

まず使用する画像は以下。

上の画像を用いて、あとは以下のようなCSSを書きます。

.star {
  width: 70px;
  height: 50px;
  background: url(https://nelog.jp/wp-content/uploads/2016/03/star_animation.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
}
.star:hover {
  background-position: -3519px 0;
  -webkit-transition: background 1s steps(55);
  transition: background 1s steps(55);
}

あとは、星を表示する場所に以下の要素を書き込めばOKです。