自主制作・架空映画「魔眼のマリア」公式サイト

職業訓練の卒業制作にて作成したサイトです。
卒業制作のサイトをどうしようか悩んでいるとき、映画のサイトを見ているとメインビジュアル全体が見えるようにメインビジュアル下部からトップへと自動スクロールする仕組みがあり、どうしてもそれを再現したいと思いこれを選びました。

スマートフォン向けのゲームが原作という設定なのでモバイルファースト方式で作成しました900px以上でPC表示になるようにレスポンシブしています。また、スクロールする動きはモバイルでの表示を少しでも軽くしたかったこととモバイルではメインビジュアルが全画面に表示されるためPC表示の時のみ動作するようにしています。
その代わり、モバイルでもサイトに動きが欲しいと思いNEWS部分に動きを設定しています。

メインビジュアルは最も印象に残ること、力を入れたかったため外注しました。作成してくださったのは鷹野葉平さんです。

今後も少しずつ手を入れてすべてのリンクを閲覧できるようにすること、ローディング画面の実装など反省点もありますがトップページの動きが実装できたのが何よりうれしかったです。

サイト作成にて参考にしたページは
映画『プロメア』公式サイト 5/24（金）全国ロードショー　https://promare-movie.com/
「Fate/Grand Order -神聖円卓領域キャメロット-」公式サイト　　https://anime.fate-go.jp/ep6-movie/
『劇場版 ソードアート・オンライン -プログレッシブ- 星なき夜のアリア』オフィシャルサイト　https://sao-p.net/
です。トップページの動きは主にFate/Grand Orderとソード・アート・オンラインのサイトを参考にJava scriptを模写しています。