jQueryで画面をじわっとフェードインさせる
Warning: Undefined variable $sc_Linkcard in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 146
手頃なローディング機能を探して試してみたが。どうしてもLoading画面がページを移動するたびにちらっと見えてしまうのが気になる。いっそのこと文字も何もないものにしてしまえ。
てことで。画面を読み込んだ時に画面を非表示にし一定時間が来たらフェードインさせるだけのもの。一瞬消えたかと思ったら次の画面に来てました、みたいにする。
まずは<head>〜</head>の間にCDNを追加する。もしくはダウンロードして読み込ませる。ずーっと1.8.3バージョンで問題なく動いてたけど。新しいバージョンでも動いた。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>以下を<body>直下に記載する。
<!-- fadeIn -->
<style type="text/css">
body { /*フェードインさせるセレクタを設定*/
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('body').fadeIn(2000);<!-- フェードインさせるまでの時間 -->
});
</script>
<!-- /fadeIn --> imgで設定してみたら画像のみフェードインさせることもできる。ただロード時間に合わせてフェードインするわけじゃないので画像が中途半端にフェードインするくらいなら画面全体をフェードインさせたほうがいいかと。
めちゃくちゃ重たいページじゃなければシンプルでいい。お気に入り。
NOTICES
- 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。