CSSアニメーションで「たべるんごのうた」を作りました

はじめに

成果物は こちらから。

注意

• 最新のChromeもしくはそれに準ずるブラウザじゃないと動かない可能性が高いです。
• リソースの読み込みの関係でチラチラすることがあります。
• 音がないです。

たべるんごのうた

みなさんご存知のことかと思いますが、ニコニコ動画でいま（2020/05/31現在）ブームが起きているです。
ご存じない方は こちらから御覧ください。

シンプルな動き、シンプルな歌、そして最後にBB素材。
圧倒的中毒性に様々な派生動画が作成され、動画の女の子「辻野あかり」は声を手に入れることに…

私自身は、アイマスに詳しくないのですが、中毒性にやられました。

CSSアニメーション+たべるんごのうた

動きがシンプルなのでかんたんに実装できてしまうのでは？と思い実装をはじめました。
CSSアニメーションの練習です。

transformというプロパティを使うのですが、複数の値の設定とanimationがここまでたくさんの値を設定することが想定されていないのでしょう。かんたんじゃなかったんご…。

調べてみると、CSS Houdiniという技術を使えば実装できそうということで、Firefox等のサポートを捨て実装しました。

仕様

• 若干動きが違う
  • 再現難しい
  • 再現疲れた
  • 画面サイズに依存しないよう％多用した
• テンポが違う
  • CSSなのでms単位で指定できるが算出するのがしんどかった
  • 元動画を0.9倍速くらいでだいたい同じ
• Svelteで実装してある
  • TaberungoNoUta.svelteをコピーしたら他で使えるかも
  • SCSSを使っているので要対応
  • 実はブルーバックにする機能がある
  • けど今回は使ってない
  • ブルーバックに限らず、CSSの色なら何でも指定できる
    • もちろんグリーンバックも

リポジトリ: https://github.com/ssssota/taberungo-no-uta

おわりに

この一大ムーブメントに乗るんご！！！