2019.12.18
POST TITLE画面遷移時にフワッとフェードインでページ全体を表示させるトップページアニメーション
こんにちは！
今回は、画面遷移時（ページ読み込み時）に、最初真っ白の画面からフワッとページ全体をフェードインさせるアニメーションの実装についてです。
jQueryを使って、たった3行のコードで実装ができます。
ちょっとしたアニメーションのエフェクトですが、フワッとページをフェードインさせることで、少し柔らかい印象になります。
ぜひ試してみてください。
フェードインでページ全体を表示させるトップページアニメーションのデモ
まずはデモページをみてみましょう。デモページを進んだら、オレンジ色のタブをクリックすることで、ページ遷移しますので、動作を確認してみてください。
CSSとjQueryの実装
今回は、ここではhtmlに追加するコードはありません。htmlに必ず必要なbodyタグに対して挙動を加えます。
CSS
hoge.cssbody {
display: none;
}今回は、htmlのbodyタグに挙動を加えるので、このbodyタグをcssで非表示にします。
そして、jQueryで「ページを読み込んだらフェードインさせる」という指示をします。
jQuery
さて、次はjQueryのコードを見ていきましょう。jQueryは、たった3行のみです。
$(function() {
$('body').fadeIn(1000); //1秒かけてフェードイン！
});これだけです。
ページ遷移するたびに、cssでページ全体を非表示させといて、jQueryでフェードインのアニメーションをつけています。
改めてデモを見てみましょう。
まとめ
過去記事の「jQueryで最初にトップページを開いたときに画面全体やロゴをフェードさせる」も、とても簡単なコードで実装できる方法をお伝えしました。
今回の記事も、とても簡単に実装できるテクニックですので、ぜひ試してみてくださいね。