ここから本文です

このサイトのヘッダー部分のウサギのキャラクターイラストが動いているのですが ...

kon********さん

2020/4/2704:10:33

このサイトのヘッダー部分のウサギのキャラクターイラストが動いているのですが
どういった仕組みで動いているのでしょうか?
HTMLソースを見ても全くわかりませんでした
CMSの機能ですか?

http://www.hitoeusagi.com/

閲覧数:
36
回答数:
4
お礼:
100枚

違反報告

PR

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

oishii_mahouさん

2020/4/2706:18:49

そのページで、
GoogleChrome のディベロッパーツールを開いて、
要素の中身を見ればすぐ分かるけど、
そのウサギのアニメーションは <canvas> タグで動かしている。

<canvas> は、
Javascript と連携して図形描画や画像などを描画できる要素で、
そのページでは、
下リンクのようにコマ割りした PNG 画像を、
<canvas> 上で1コマ分にトリミングして表示し、
表示するコマをミリ秒単位の短い時間周期で切り替えることで、
アニメーション表示している。

http://www.hitoeusagi.com/wp-content/themes/hitoeusagi-theme/assets...

この <canvas> 上のアニメーション動作は、
すべて Javascript で制御されている。
画像じたいは、
アニメーション PNG などではなく、
コマ割りした通常の透過あり静止画 PNG ファイル。

質問した人からのコメント

2020/4/28 01:20:04

とても詳しく教えてくださってありがとうございます!
私でも理解できましたm(__)m

ベストアンサー以外の回答

1〜3件/3件中

並び替え:回答日時の
新しい順
|古い順

eos********さん

2020/4/2715:01:20

動画GIFで画像埋め込みでもできるでしょうけど、JSで複数の画像を制御してもアニメーションは可能ですね。

プロフィール画像

カテゴリマスター

chi********さん

2020/4/2706:10:18

canvasタグと JavaScript(animation.js)で動いているようです。

http://www.htmq.com/html5/006.shtml

monBLOGさん

編集あり2020/4/2704:53:23

ヘッダー画像自体が動いているイラストかと思いましたが、いかがでしょうか?

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる