ヘッダーのアニメーションの実現方法について

ヘッダーのアニメーションの実現方法について

記事
IT・テクノロジー

こんにちは!ロベルタです
最近色々なサイトを見ていて、すごく綺麗だなと思っていたものの構築方法を考察・・・

僕がすごく気になっているのがこれら↓
スクリーンショット 2026-03-01 8.14.57.png


オッカさん??のサイトなんですが、こいつがスゴい・・・
まず開くとページに線がイロイロ走った後にクラス(段落)が変わった後に映像が切り替わっている・・・??

ここまでのものはJavaScriptでは恐らく実現不可能・・・(自由な線の描画とかは多分無理。できはするみたいだがめちゃくちゃ複雑??有識者の方コメント待っています)ですが、ゆくゆくこういうの作りたいなと思っていました。クオリティ高いものは作れるに越したことはないですからね!
そこで最近たまたま行ってみた勉強会で「これ使えるかも」と思ったのがこちら
スクリーンショット 2026-03-01 8.23.56.png


Unreal Engineというソフトです。こいつは中々の優れものでして、、その勉強会というのもゲーム制作とかアニメ制作の勉強会だったのですが、昨今のアニメとかゲーム、映像って基本はこれかUnityで作成しているそうです。。
このソフト使って作成したものとか僕の参加した勉強会で発表されていたのですが、これがかなりヤバいクオリティで正直びっくりしていました。。普通に流せるようなレベルのアニメ自作している人もいましたよ・・・マジか。。

Webエンジニアしている人からあまり映像制作みたいな話は聞いたことがないので、「これは使える!!」と思っています。

オッカさんのサイトみたいな構成にする方法もすでに思いついているので今開発しているシステム用の映像を作成してみようかなと考えています!!

・・・しばらく映像制作などの時間も多くとるので中々ブログ更新する機会無くなってしまうかもしれませんが、デザインが大まかに完成したらまたブログ更新しようかなと考えています!!

それではまた!

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら