JavaScriptでアニメーションを制作しました。

URL

http://ky0419.stars.ne.jp//website/Javascrip_animation/index.html

担当

デザイン・コーディング

制作期間

2023年10月5日～10月6日

サイトの目的

プログラミング学習

デザインについて

[全体]
歴史に関する素材を動かしてタイムマシンを使った時間旅行を制作しました。同じ方向に流して時の流れを表現しています。
動きが横移動でシンプルな分微妙にスピードを変化させ奥行きと空間を表現しました。
[世界史]
古代ギリシャ・ローマから中世ヨーロッパ、ルネサンスの文化、フランスの絶対王政と革命・建造物、近代ヨーロッパの建築を旅しています。
[日本史]
江戸時代の幕末から開国、明治時代、文豪・知識人、大正時代の国会議事堂建設、戦争、日本国憲法、戦後の文化、平成時代、令和とパンデミック、最新の科学技術を見ています。

コーディングについて

[全体]
素材数が70以上あるので一つずつ動かして確認するのが大変でした。後半になるとスキップできず待ち時間が長くなるため前半後半の二つに分けて制作し、最後に前半の分の時間を追加しました。
背景のモーションはGIF画像を使用しています。