WordPressサイトのいつもの方針を翻って、LIQID PRESSさんのテーマを使っています。
hiro
magmag
WordPressにjQueryでローディングアニメーションを実装したメモ
hiro
記事内に商品プロモーションを含む場合があります
こちらの動くWebデザインアイディア帳さまを見て、ローディングアニメーションを実装してみました。つまづいたところもありますので、メモします。
書いてある通りにやれば、全然設置できるのですが、ちょっとつまづきました。
まずは、jQueryのCDNを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>それから、表示させたい場所に以下を設置します。
<div id="splash">
<div id="splash_logo">
<img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/4-1-4/img/loading.svg" alt="" class="fadeUp">
</div>
</div><div id="splash">
<div id="splash_logo">
<img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/4-1-4/img/loading.svg" alt="" class="fadeUp">
</div>
</div>loading.svgはご自分のロゴに差し替えて下さいね。
以下のスクリプトを読み込んでください。見本のスクリプトでは動かずChatGPTに修正してもらいました。
<script>
jQuery(document).ready(function($) {
$(window).on('load', function() {
$("#splash").delay(1000).fadeOut('slow'); // ローディング画面を1秒（1000ms）待機してからフェードアウト
$("#splash_logo").delay(1000).fadeOut('slow'); // ロゴを1秒（1000ms）待機してからフェードアウト
});
});
</script><script>
jQuery(document).ready(function($) {
$(window).on('load', function() {
$("#splash").delay(1000).fadeOut('slow'); // ローディング画面を1秒（1000ms）待機してからフェードアウト
$("#splash_logo").delay(1000).fadeOut('slow'); // ロゴを1秒（1000ms）待機してからフェードアウト
});
});
</script>これで、スクリプト類はうまくいきましたが、
CSSを直しました。
/* Loading背景画面設定 */
#splash {
/*fixedで全面に固定*/
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 999;
background:#333;
text-align:center;
color:#fff;
}
/* Loading画像中央配置 */
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定 */
#splash_logo img {
width:260px;
}
/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}背景が最初、ずれて表示されてしまったのですが、
position: fixed;に
top:0;と
left:0;が
見本に記述されていなかったのが原因と思いました。top:0;とleft:0;を追記したらうまくいきました。
以上です。よろしく〜。
広告
ABOUT ME
小１娘を育児中の主婦。娘の不登校と向き合っています。ブログカスタマイズが趣味。