STARWARSオープニング風

プログラミングの勉強をはじめて3ヶ月が経過した。　完全なる未経験から３ヶ月間なのでまだまだ出来ることは少ないのだが、アウトプットが大事だという先輩方のツイートやブログをよく目にすることからも何かを作り、形にするということを目標としてみた。

そんな今、スターウォーズの新作が上映されるタイミングと言うのでお馴染みのオープニング画面を再現してみることにした。　これまで勉強したことは、Webデザインつまりフロントエンドの部分であり、HTMLとCSSとJavaScriptとPHP、そしてCG分野ではPhotoshopとillustratorだ。　このページでもその技術を今の出来る限りをフルパワーで使っており、３ヶ月間で出来るようになった事として、後で見るための記録と思っている。
今回はHTMLとCSSのみで作成しており、CSSのトランスフォームとアニメーションを併用することで成功した。　だが、上の方の空白が気になるし、そこを埋めるためにマージン・トップにマイナス値を入れてみたりポジションのトップの％の値を変更してみたりと試行錯誤しているのだが、なかなかうまくいかない。　3か月間ではこの程度だということで、一旦これで完成ということにしよう。

制作について

３ヶ月間の成果を何か作ってみたいと思って制作しました。

スターウォーズの新作が上映されるタイミングだったし、私もファンですのでお馴染みのオープニング画面を再現してみることにしました。
ページを開くと文字が手前から奥へと流れていきます。

HTMLとCSSのみで作成しており、CSSのtransformとanimationを併用することでそれっぽくしています。

position: absoluteで位置を固定し、transformで台形にし、下からフェードイン（スクロール）するanimationを使っています。