Yappli Tech Blog

株式会社ヤプリの開発メンバーによるブログです。最新の技術情報からチーム・働き方に関するテーマまで、日々の熱い想いを持って発信していきます。

CSSスプライトを使用して、簡単にぐるぐる動くアニメーションを実装しました。

はじめまして。フロントエンドエンジニアの相原と申します。 普段はYappli CMSのUIを実装しております。
通常業務で大きく動くアニメーション等を実装する機会はあまり(と言うか殆ど)無いのですが今回久しぶりにそういった機会に恵まれたのでその辺りの事をお伝え出来ればと思います。

仕様のようなもの

内容的にはちょっと演出のある社内向けLPのような感じで、元々の仕様は以下の通り。

  • 格子状に顔画像を配置する。
  • 顔画像は数秒おきのタイミングでランダムに被りなく入れ替わる。
  • 基本的に最初だけ読み込めば後は共有モニター等で表示しっぱなし。

さらにこれにアニメーションを追加しました。こんな感じで動きます。
f:id:t201cassis:20211229125228g:plain

内容はいいからサンプルという方はこちらからどうぞ。
https://jsfiddle.net/takuto_ex/oq3zay2u/

Yappli CMSではVue.jsのフレームワークであるNuxtで実装を行っているのですが、今回のLPも同じ環境で実装しました。

CSSスプライトを使うに至った経緯

今回のサンプルでは画像6枚なのですが実際のLPでは40秒周期で175px*175pxの画像を18枚同時に入れ替えます。
その度に画像読み込み時間が発生し、表示のチラつきがどうしても起こるのでコレは見た目的にイケてないぞ・・・と考えました。

さてどうしようかな・・・となった時に思い出したのがCSSスプライトです。なつかしい。
CSSスプライトは複数の画像を一枚の画像にまとめ、background-positionを使い表示するテクニックなのですが今ではあまり使われていません。

そもそも2010年代前半はまだHTTPリクエスト順にレスポンスが返ってくる時代で、アイコンやUI画像を多用するWebサイトでは表示が重くなってしまう問題を抱えていました。

なのでアイコンやボタン等UIパーツを1枚の画像にしてしまえばリクエストは1度で済みます。そのためCSSスプライトは重宝されていたのですが、2015年頃からHTTP/2にバージョンアップされ並行して複数のリクエストを同時に処理出来るようになりました。

今でもサイトの表示速度をカリカリにチューニングしなければならないような現場では使用されているようですが、そうで無い場合実装するには手間も多いため現在ではあまり使われなくなってしまいました。

自動で連結した画像とCSSを生成してくれたGulp等のタスクランナーも更新がかなり前に止まってしまいました。
さみしい。

ただ今回のように決まった画像郡から定期的に表示する画像を複数同時に入れ替えるような実装をする際はかなり有効かと考えます。
最初の読み込みさえ完了すれば基本的には表示しっぱなしのページですし、background-positionを使うならtransitionを使って演出する事が出来ます。

ちなみに今回ブログ用に作ったサンプルではStitchesというツールを利用して画像とcssを用意しました。手軽でうれしい。
http://draeton.github.io/stitches/

画像はこんな感じ。
f:id:t201cassis:20211227150101p:plain

上記の顔写真は写真AC様にてAIにより生成されたものを使用してみました。すごすぎる。
AI人物素材(ベータ版)|写真素材なら「写真AC」無料(フリー)ダウンロードOK

若干の工夫

またCSSスプライトを使用した以外変わったところはあまり無いのですがちょっとした工夫をしています。

transitionをそのまま実装していると動きはランダムで派手になるのですがdurationが一定なためすべての画像がピタッと止まります。どうにもなんかイケてない気がするのでそれぞれのtransition-durationも1秒〜3秒でバラけるようランダムにしてみました。

~
@for $i from 1 through 12 {
  .face-#{$i} {
    transition-duration:  random(3) + s
  }
}
~

SCSSだとrandomが使えるので、複数のtransition-durationを散らしたい時等は便利ですね。
ただ正直な話をすると実装してる最中SCSSのrandomを全く思い出せず、この記事用のサンプルを書いてる時に思い出しました。くやしい。

まとめ

通常の業務はYappli CMSのフロント実装がメインなため今回のような業務は結構珍しいのですが、たまにはこういった作業もフロントエンドエンジニアとして領域が広くなって良いかもしれません。

今回の内容が、何かしらの参考になりましたら幸いでございます。