ページ遷移のたびに要素をふわっと表示させる
目次
今回やりたいこと
ページを読み込むたび(ページ遷移含む)に、body内の要素をフワッと表示させます。
少ない記述でサイトに少しですが動きを持たせることができるので、サイトの雰囲気にもよりますが汎用出来そうです。
jQuery
今回はjQueryで記述していきます。コードはたったこれだけです。
$('body').hide();
$(window).on('load', function () {
$('body').fadeIn(2000); // fadeInにかける時間
});
解説
まず「hide()」によって要素を隠した状態にしておきます。
「on(‘load’)」はページの読み込みが完了したらという意味なので、このタイミングで上記で隠したbody要素をfadeInさせています。
fadeIn()の引数は2000となっていますが、これは2秒かけてfadeInさせるということになるので、好みに合わせて調整してください。