アマゾンの動くアイコンについて

Question

こんにちは。
この間アマゾンのサイトにログインしていたのですが、上部の人間のアイコンが動くことに気づきました。

面白いと思って大変興味を持ったのですが、ググってもなんの技術か出てきません。

このアイコンはなんの技術を使用しているのでしょうか。
https://www.youtube.com/watch?v=RyBabnTyXQw

Answer 1

ブラウザの開発者ツールでそのアイコンがどうやって表示されているか調べられます。

アニメーションGIFですね。
https://images-fe.ssl-images-amazon.com/images/G/09/gno/sprites/account-wave2x._CB403808729_.gif

Answer 2

概要

動くアイコンの実体はアニメーションgifです。
前回ログインから一定以上が経過 or 初回ログイン時のみ、javascriptを用いてアイコンをアニメーションgifに切り替えます。

詳細

前回ログイン日時を格納/取得するための技術としては、StorageAPIのlocalStorageを使用しています。
具体的な確認方法は割愛させていただきますが、開発者ツール等でlocalStorageの下記キーを参照いただくと、ログイン日時がDate.now()形式で格納されていることがわかります。

NavmAccountWavingTimestamp

そして、このキーが存在しない場合（初回アクセス） or 現在の日時 - 前回ログイン日時が一定値以上の場合にアイコンの置換処理を発火させます。

＃ このキーを手動で消せばリロードの度に手を振ってもらえます