・ページ読み込み時に要素をフワッとフェードインさせるには？
こんな疑問にお答えします。
ページが読み込まれた後、フワッとフェードインして表示させるサイトありますよね。
下記みたいなやつ↓
これ実は簡単に実装できちゃいます。
すぐにできるよ！
ということで、この記事では「ページ読み込み時、要素をフワッとフェードインする方法」について解説していきます！
・ページ読み込み時｜要素をフワッとフェードインする方法
・ページ読み込み時｜サイト全体をフワッとフェードインする方法
・ページ読み込み時｜違う方法でフワッとフェードインする方法
ちなみにスクロールしたらフェードインするアニメーションは、下記記事を参考に↓
【jQuery】スクロール時のフェードイン【サンプル・コピペコード付き】 
【解説】jquery.inviewの使い方【サンプル・コピペコード付き】 目次
【簡単】ページ読み込み時｜要素をフワッとフェードインする【jQuery】
読み込み時にフェードインして現れるサンプルがこちら↓
（右下のRerunをクリックしてみてください）
See the Pen ➀jquery.inview by jito-coder (@jito-coder) on CodePen.
<div class="js-box">
<div class="item">読み込まれたらフェードイン！</div>
</div>.js-box {
display: none;
}
.item {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
width: 300px;
height: 200px;
color: #fff;
background-color: #000066;
}$(window).on("load", function() {
$('.js-box').fadeIn(2000);
});コードの意味として重要な点がこちら↓
- フェードインさせる要素のクラスをつける
- その要素を非表示にしておく
- ロードしたらフェードインするコードを記述
順に解説していきます！！
まずフェードインさせる要素に対して、特定のクラスをつけておきます。
今回でいうと「js-box」ですね。
<div class="js-box">
<div class="item">読み込まれたらフェードイン！</div>
</div>このクラスに対してフェードインさせるようにこの後指定します。
次にフェードインさせる要素を非表示にします。
display: none;を指定。
.js-box {
display: none;
}最後にjQueryにて、ページ読み込み時にフェードインするコードを記述していきます。
$(window).on("load", function() {
$('.js-box').fadeIn(2000);
});このコードは「ウインドウがロードを終えた後、js-boxの要素をを2000ミリ秒かけてフェードインする」という意味。
つまりページ読み込み時に、2秒かけてフワッと現れるように反映できます。
簡単に実装できますよね！
【簡単】ページ読み込み時｜サイト全体をフワッとフェードインする【jQuery】
続いて「要素」でなく「サイト全体」を、ページ読み込み時にフェードインさせる方法を紹介していきます。
とはいってもやり方はほぼ同じ。
こちらがサンプルになります
（右下のRerunをクリックしてみてください）
↓
See the Pen ➁ 読み込み時フェードイン by jito-coder (@jito-coder) on CodePen.
<body>
<!-- ここにコンテンツが入ります -->
</body>body {
display: none;
}$(window).on("load", function() {
$('body').fadeIn(2000);
});body自体に対して、フェードインのイベントを発動しています。これだけでサイト全体が、ページ読み込み時にフワッと表示されるようになりました。
もちろんページ遷移時でもフェードインのイベントが発動します！
【簡単】ページ読み込み時｜要素をフワッとフェードインする違うやり方【jQuery】
最後に違うやり方で、フェードインなどをさせる方法を紹介します。
それが「fadeIn」メソッドを使うのではなく、クラスを付与してcssによるアニメーションを利用することです。
そんなサンプルがこちら（右下のRerunをクリックしてみてください）↓
See the Pen ➁ 読み込み時フェードイン by jito-coder (@jito-coder) on CodePen.
<div class="js-box">
<div class="item">読み込まれたらフェードイン！</div>
</div>.js-box {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.js-box.load {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}$(window).on("load", function() {
$('.js-box').addClass('load')
});このコードは「ウインドウがロードを終えた後、js-boxのクラスを持つ要素に対して、loadというクラスを付与する」という意味。
つまりloadのクラスがついたら、表示させるようにcssにて記述すれば実装可能。
ページ読み込み時にフワッと表示させることができます！
ちなみにこの方法なら、フェードイン以外にも、色を変えたり横幅を変えたりなどのアニメーションも可能になります。
こんな感じ（右下のRerunをクリックしてみてください）↓
See the Pen ➃読み込み時フェードイン by jito-coder (@jito-coder) on CodePen.
<div class="item js-bg"></div>
<div class="item js-width"></div>.js-bg {
background-color: #000066;
transition: background-color 3s;
}
.js-bg.load {
background-color: red;
}
.js-width {
width: 50%;
transition: width 3s;
}
.js-width.load {
width: 100%;
}$(window).on("load", function() {
$('.js-bg').addClass('load');
$('.js-width').addClass('load');
});ページ読み込み後に、指定の要素に対してクラスを付与。そしてcssで前後の違いを記述しておけばアニメーションが実装できます！
【簡単】ページ読み込み時｜要素をフワッとフェードインする【jQuery】：まとめ
- 非表示にしておき、jQueryを使って読み込み時にフェードインイベントを発動させる
- bodyに対して指定すれば、サイトごとフェードインが可能。しかも画面遷移後でもOK。
- ページ読み込み時にクラスを付与する指定をすれば、色々なアニメーションが実装可能
ページ読み込み時のフェードインはよく使うので覚えておこう！
ちなみにスクロールしたらフェードインするアニメーションは、下記記事を参考に↓
【jQuery】スクロール時のフェードイン【サンプル・コピペコード付き】 【解説】jquery.inviewの使い方【サンプル・コピペコード付き】
