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
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
関連した質問
Q&A
解決済
googleフォームのアクセス権限について
回答1
クリップ1
更新
2019/05/01
Q&A
解決済
【Javascript】モーダルを閉じたときに上に戻らないようにしたい
回答1
クリップ1
更新
2023/04/22
Q&A
解決済
デスクトップのアイコンの間隔が広くなるバグ
回答1
クリップ0
更新
2020/06/24
Q&A
受付中
htmlで非活性(disabled)にしたのに、リンク先に飛べてしまう。
回答5
クリップ0
更新
2022/01/12
Q&A
解決済
Font Awesome のアイコンと共にリンク化した文字列を、好みのフォントに変えたい
回答1
クリップ1
更新
2023/05/17
Q&A
解決済
Uriの中身(存在)チェックのやり方について
回答2
クリップ0
更新
2023/05/26
Q&A
解決済
画像をS3に保存したいのですが方法がわかりません。
回答1
クリップ0
更新
2023/04/20
同じタグがついた質問を見る
SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。
Flashは、Webページにアニメーション、ビデオ、また対話型のアプリケーションを埋め込むためにAdobe社が提供しているクロスプラットフォームのインターネットマルチメディアランタイムです。
JavaServer Faces(JSF)はJavaをベースとしたコンポーネントベースのwebアプリケーション開発用のフレームワークです。
HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。