トップ画像を読み込んだ後に上部にヘッダーナビが出てくる動作を理解したい

前提・実現したいこと

ヘッダートップのナビゲーションの動作を理解したい。
サイトにアクセスする→トップ画像が表示→画像が少し縮小され、上部にヘッダーナビが上からスライドしてくる、という動作です。

該当のホームページ

https://www.fufukawaguchiko.jp/
トップページを読み込んだ際の動作です。
（画像下部に出てくる日付の方は今回は必要としていません）

JSとJqueryで書かれており、
ソースコードを見た感じでは自分でも頑張ればなんとか実装できるのでは？と考えたのですが、
トップ画像を読み込んだ後にナビが出てくる、という動作が自分では発見できず、
お力をお借りできればと思いこちらに来ました。

###知りたいこと
1.ソースコードのどの部分が該当するのか
2.こういう動作が実行できるプラグイン等などがあるのであれば知りたい
３.この動作を実装する上で必要な知識（JSやJqueryのどこを勉強すれば理解できるか）を知りたい

初学者のため、的を得ていない部分があるかと思いますが、ご容赦いただけますと幸いです。
何卒よろしくお願いいたします。

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

回答1件

ベストアンサー

普通に組めば作れます。

HTML
1<body>
2  <div id="loading">
3    LOADING
4  </div>
5  <main>
6    <div class=menu>
7      MeNu
8    </div>
9    <img src=https://4k-wallpaper.com/3840x2160/4k-Ultra-HD_00348.jpg>
10  </main>
11</body>

CSs
1* {
2  margin: 0;
3  padding: 0
4}
5main {
6  display:none
7}
8img {
9  width: 100%
10}
11.menu {
12  height:2em;
13  line-height: 2em;
14  position: absolute;
15  top: -2em
16}

jQuery
1window.onload = function () {
2  $("#loading").delay(1000).fadeOut();
3  $("main").delay(1500).fadeIn();
4  $("img").delay(3000).animate({width:"90%",marginLeft:"5%",marginTop:"2em",height:"auto"},"slow", "swing");
5$(".menu").delay(3000).animate({top:"0"},"slow", "swing");
6}

何気に自信作です。
サンプル

投稿2019/10/02 03:02

編集2019/10/02 03:20