URLにアニメーションをつける

はじめに

友達からおもしろいと言われ、このツイートを見ました。
「URLに動きがついていておもしろい！」と感動したので、自分も作成してみました。
GitHub Pagesに公開しましたのでこちらからURLの動きを見ることができます。

URLにアニメーションをつける

location.hashを使用し、URLの#以下に動きがつくようにします。

app.js

const moons = ["🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘"];

const loop = (arr, count = 0, time = 75) => {
  location.hash = arr[count % arr.length];
  setTimeout(loop.bind(this, arr, count + 1, time), time);
};

loop(moons);

上記のコードを実行すると以下のように動きます。

loop関数は第一引数に文字列を持つ配列を指定し、第二引数には配列の開始位置を数値で指定します。第三引数には何ミリ秒ごとにloop関数を実行するかを数値で指定します。

上記のコードを応用して以下のように記述することもできます。

app.js

const clocks = ["🕛", "🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚"];

const loop = (arr, count = 0, time = 75) => {...}

loop(clocks, 1, 100);

上記のコードを実行すると1時の絵文字から100ミリ秒間隔で動きます。

おわりに

普段の開発ではURLにアニメーションをつけることはほとんどありませんが、ポートフォリオなどにつけると少し遊び心があっていいのではないでしょうか。

参考URL