URLアニメーションのやり方
当ブログに絵文字を使ったURLアニメーションを遊びで実装してみたのでやり方とコードを紹介。
技術的には簡単でURLの変更はhistory.replaceStateやlocation.hashを使い、アニメーション部分はsetIntervalやsetTimeoutを使って一定時間ごとにURLの更新を行うというものである。（※history.pushStateはブラウザの履歴が死ぬので使わないこと）
単純なループ
ハッシュに単純な絵文字のループを追加するのであれば下記のような短いコードで可能。
loading...
複数アニメーションを繋げる
しかし、複数のアニメーションを繋げる場合単純なループだけではできないのでasync/awaitを使って実装した。 以下が当ブログのコード。
loading...
実装してみてブラウザによって対応していない絵文字があることがわかった。 またPC版SafariだとURLが中央に表示されるためURLを更新すると位置がズレ、カクカクする問題も確認。
その辺りどうするのか今後の課題。