Q&A
こんにちは。
この間アマゾンのサイトにログインしていたのですが、上部の人間のアイコンが動くことに気づきました。
面白いと思って大変興味を持ったのですが、ググってもなんの技術か出てきません。
このアイコンはなんの技術を使用しているのでしょうか。
https://www.youtube.com/watch?v=RyBabnTyXQw
回答2件
3
ブラウザの開発者ツールでそのアイコンがどうやって表示されているか調べられます。
アニメーションGIFですね。
https://images-fe.ssl-images-amazon.com/images/G/09/gno/sprites/account-wave2x._CB403808729_.gif
投稿2022/08/29 07:38
編集2022/08/29 07:45
総合スコア18631
2
ベストアンサー
概要
動くアイコンの実体はアニメーションgifです。
前回ログインから一定以上が経過 or 初回ログイン時のみ、javascriptを用いてアイコンをアニメーションgifに切り替えます。
詳細
前回ログイン日時を格納/取得するための技術としては、StorageAPIのlocalStorageを使用しています。
具体的な確認方法は割愛させていただきますが、開発者ツール等でlocalStorageの下記キーを参照いただくと、ログイン日時がDate.now()形式で格納されていることがわかります。
NavmAccountWavingTimestamp
そして、このキーが存在しない場合（初回アクセス） or 現在の日時 - 前回ログイン日時が一定値以上の場合にアイコンの置換処理を発火させます。
＃ このキーを手動で消せばリロードの度に手を振ってもらえます
投稿2022/08/29 12:52
総合スコア135
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。