URLのようなサイトを作りたいのですが、構造がわかりません

http://plant22.co/

このサイトのように、例えば「space」をクリックした時に
ヘッダーは固定されたままで、紫の部分が大きくなり、
ヘッダー下にページが展開されるようなwebサイトを作りたいのですが
なんと検索したら良いのかすらわからず
有益な情報が得られなかったので投稿させていただきました。
モーダル、ヘッダー固定、画面遷移、などでググりましたがわかりませんでした。

なんとググったら近いようなコードを得ることができるのか
教えていただけないでしょうか。
WEB初心者なもので、デベロッパーツールを見ただけでは理解ができませんでした。。

よろしくお願いいたします！

行動規範の内容に同意します

回答3件

質問者様提示のURLは独自で実装しているようでまんまのスクリプトは見つかりませんでした。
のでいろんな要素を集めて作る必要があると思います

ヘッダー固定

参考URL

オーバーレイ表示

参考URL
参考URL

投稿2018/10/15 05:04

MMashiro

総合スコア2378

data属性に次のような属性名がありますね。
data-transition-layer
data-open-layer

キーワードとしては「レイヤー」でしょうか。
ただ、細かい指定についてはキーワードそれだけでは無理で、
幾つかの機能を複合的に組み合わせる必要があります。
1個ずつ動作を分解して細分化していってください。
たぶんコピペコードそのまま落ちていることはないので、
どうしてもコピペしたければ参照サイトのコードで関連しそうなところを
探るしかありません。
もちろん100%そのまま使うことはないでしょうから
自身で解析して理解してカスタマイズしていくことになるのですけど、
やはり自身が分かるところまでは調べて検証してやっていく必要があります。
初心者だからできないというのではなく、基本のところを少しずつおさえていけば
必ずできるようになります。
（問題はやる気と根気ですね）