はやし雑記

はやしです

トップ > 技術系 > TwitterのlikeみたいなエフェクトをJSとCSSで実現する

TwitterのlikeみたいなエフェクトをJSとCSSで実現する

技術系

祝 Twitter10周年！

らしい それに合わせてかTwitterのlikeのエフェクトが変わった

このlike押した時にエフェクトかかるのは去年から

これの仕組みはどうなっているのか、どうすれば自前で実現できるかについて書いていきます

仕組み

このエフェクトはどっちも横長の画像を切り替えて実現させている 旧エフェクトは f:id:hayashikunsan:20160321164758p:plain

新エフェクトは f:id:hayashikunsan:20160321164813p:plain

で成っていて、前者は2900 × 100pxで後者は15960 × 280pxなので、それぞれ29コマと57コマの画像を切り替えてアニメーションにしてる

では、この横長の画像1枚からアニメーションを実現させるのはどうすれば良いかというと、CSSのbackground-positionを使う この属性の詳細はググってみてください

この属性の値を一定時間ごとに変えて、表示させる場所を変えればアニメーションになる

デモ

Twitterの新エフェクトを動かしてみる ソースは

<html>
    <head>
        <style>
            #heart {
                background-image: url(heart.png);
                height: 280px;
                width: 280px;
                animation: like 5s steps(57) 0s 1;
                animation-fill-mode: forwards;
            }
            
            @keyframes like {
                0% { background-position: 0px center; }
                100% { background-position: -15960px center; }
            }
        </style>
    </head>
    <body>
        <div id="heart"></div>
    </body>
</html>
<html>
<body>
<style>
#heart {
    width: 280px;
    height: 280px;
    background-image: url(heart.png);
    background-position: left;
}
</style>

<div id="heart"></div>

<script>
document.getElementById("heart").addEventListener("click", function(el) {
    var offset = 280 * 57;
    var tm = setInterval(function() {
        if (offset == 0) {
            clearTimeout(tm)
        } else {
            el.target.style.backgroundPosition =  offset + "px 50%";
        }
        offset -= 280;
    }, 50);
});
</script>
</body>
</html>

汚いけど許して

前者がCSS3のみを使う場合で、後者がJSを使って頑張る場合 前者のほうがよさ気だけど、IEとか一部対応してなさそう

こんな感じ

実際Twitterの中ではもうちょいいい感じにやってるんだろうけど、こんな感じで簡単に実現できるね！やったね！