JavaScriptを使わずにCSSのみでローディングアニメーションを実装する【Web制作】
今回の内容はローディングアニメーションをコンテンツと切り替える機構をJavaScriptを使わずにCSSのみで実装する方法を紹介します。
JavaScriptを使わずにCSSで秒数を指定して実装するためコンテンツの読み込みとは関係なしにローディングアニメーションとコンテンツが切り替わります。
絶対にJavaScriptを使わずに実装したいという方以外にはおすすめしません。
ローディングアニメーション本体についてはいろんなサイトで紹介されているので当サイトでは割愛します。
導入方法
HTMLの記述
まずはHTMLの記述からしていきます。
サイトのコンテンツを<div>タグで囲みid名を適当に付けます。
当サイトではid名をloading-contentとして進めていきます。
<body>直下に下記のコードを追記します。
<div id="loading">
<img src="ローディングアニメーション.gif" alt="ローディングアニメーション"/>
</div>ローディングアニメーションの箇所は適宜変更してください。
最終的に下記のようなコードになっていれば大丈夫です。
<div id="loading">
<img src="ローディングアニメーション.gif" alt="ローディングアニメーション"/>
</div>
<div id="loading-content">
サイトのコンテンツ
</div>HTMLの記述はこれで完了です。
CSSの記述
次はCSSでローディングアニメーションの位置の調整をします。
下記のコードを追記します。
#loading {
width: 100vw;
height: 100vh;
background: #fff;
position: fixed;
top: 0;
left: 0;
animation: 1s fadeOut 5s forwards;
}
#loading img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#loading-content {
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
animation: 1s fadeIn 5s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
width: unset;
height: unset;
overflow: unset;
opacity: 1;
}
}これで実装できるはずです。
ローディングアニメーションの時間を変更したい場合は2箇所あるanimationの5sという箇所を変更してください。
まとめ
今回はJavaScriptを使わずにCSSのみでローディングアニメーションを実装する方法を紹介しました。
間違っているところや質問があれば気軽にコメントもらえると嬉しいです。
0 コメント