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

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

Twitterのいいねボタン

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

スポンサーリンク
レクタングル(大)広告

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

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

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

Twitterのハート部分のCSSソース

画像の場所は以下。

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

以下がその画像です。

web_heart_animation

で、上の画像を用いて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

星形のエフェクト

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

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

star_animation

上の画像を用いて、あとは以下のような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です。

<div class="star"></div>

詳しい説明は、以下のサイトに載っています。

参考 Twitter’s “fave” animation – CSS Animation

まとめ

個人的に、アイコンフォントにjQueryか何かでエフェクトがかかっているのだと思っていました。けれど実際に行っていたのは単なる画像のアニメーションでした。確かに、これだと絵を書く人さえいれば実装はものすごくシンプルになります。

ただ、自前で同様のことをしようと思ったら、エフェクト用の絵を何枚も書く必要があります。僕には、こういったエフェクト絵は、書けそうにないので、逆に自前で実装するのは、難しいです。

でも、普段何の気無しに使っているTwitterの「いいね」ボタンにも、「何枚もエフェクト用の絵を書く手間がかかっているのだな」と参考になりました。