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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

Twitterのいいねボタン

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

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

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

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

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

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

画像の場所は以下。

以下がその画像です。

web_heart_animation

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

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

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

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

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

参考 live example on CodePen

星形のエフェクト

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

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

star_animation

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

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

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

参考 Twitter’s "fave" animation – CSS Animation

まとめ

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

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

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