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

今回やりたいこと

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

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

jQuery

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


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

解説

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

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

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

related article

2020/01/22 JavaScript

PCとスマホで別の画像に切り替えてくれるjQuery

2019/12/10 JavaScript

jQueryでレスポンシブのfadein/outスライダー

2019/10/10 JavaScript

HTML内に書いたjQueryが動かない

2019/10/15 JavaScript

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