ページ遷移のたびに要素をふわっと表示させる

今回やりたいこと

ページを読み込むたび(ページ遷移含む)に、body内の要素をフワッと表示させます。

少ない記述でサイトに少しですが動きを持たせることができるので、サイトの雰囲気にもよりますが汎用出来そうです。

jQuery

今回はjQueryで記述していきます。コードはたったこれだけです。


$('body').hide();
$(window).on('load', function () {
  $('body').fadeIn(2000); // fadeInにかける時間
});

解説

まず「hide()」によって要素を隠した状態にしておきます。

「on(‘load’)」はページの読み込みが完了したらという意味なので、このタイミングで上記で隠したbody要素をfadeInさせています。

fadeIn()の引数は2000となっていますが、これは2秒かけてfadeInさせるということになるので、好みに合わせて調整してください。

related article

2019/10/15 JavaScript

Windowサイズが変わった時に行う処理

2019/12/10 JavaScript

slickで現在のページ数 / 総ページ数を表示させる

2019/11/15 JavaScript

slick.jsをwebpackで使いこなす

2019/10/15 JavaScript

スマホで背景スクロールを禁止にする