JQueryでページのフェードイン
JQueryでページのフェードインをさせる方法です。CSSでフェードインする方法は別ページにまとめていますので、併せてご確認下さい。
JQueryによるフェードインの使用例
～ 背景画像残しつつフェードイン ～
HTML
特別に記載する必要ありません。
<body>タグを利用します。
JavaScript
$(function(){
$("body").hide();
$("body").fadeIn(5000);
});
背景画像を表示した上でその他要素をフェードインします。こちらが例です。
fadeInの()内はミリ秒で指定します。5000なら5秒です。その他に"slow"、"normal"、"fast"が指定できます。
省略して()にすることも可能です。その場合"normal"です。
～ 画面全体「白」からフェードイン ～
HTML
<body>
<div class="cover1">
<div class="cover2">
・・・・・
～ソース～
・・・・・
<div>
</div>
</body>
bodyタグの前後、ちょうどページ全体を覆うようにクラスを2つ作成して下さい。
CSS
.cover1 {
z-index:999;
animation: fadein 5s ease-out;
animation-iteration-count: 1;
}
@keyframes fadein {
0% {background: rgba(255,255,255,1);}
100% {background: rgba(255,255,255,0);}
}
JavaScript
$(function(){
$(".cover2").hide();
$(".cover2").fadeIn(2000);
});
CSSのアニメーションとJQueryを組み合わせることで画面全体「白」からフェードインしています。
このページはこの方式のフェードインです。