はじめに
今回は僕が以前ウェブサイトを作る際にちょっとかっこいいローディング画面があったらなと思って作ったローディングアニメーションの作り方を解説します。
作り方
HTML
まずはHTMLを用意します。
index.html
<div class="loading-main">
<p>Now Loading...</p>
<div class="loading-line"></div>
</div>
<div class="main">
<div class="center">
<div id="title">
<h1>KURO</h1>
</div>
</div>
</div>
ここで用意したのは、「Now Loading...」の文字とローディングアニメーションの線、それとローディングが終わった際に表示するタイトル画面です。(今回は自分の名前が画面中央に表示されるようにしました。)
CSS
次にスタイルシートです。
loading.css
* {
margin: 0;
padding: 0;
font-family: 'Playfair Display SC', serif;
}
body {
width: 100%;
background-repeat: no-repeat;
position: relative;
background-color: #f9f9ff;
}
.loading-main {
width: 350px;
height: 300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
}
.loading-main p {
margin: 100px;
}
.loading-line {
height: 1.5px;
background-color: #000;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -550px;
margin: auto;
}
.main {
display: none;
overflow: hidden;
position: relative;
}
.center {
margin: auto;
}
#title {
overflow: hidden;
}
#title h1 {
text-align: center;
margin: auto;
margin-top: 350px;
}
CSSではloading-mainとmainの要素を真ん中に配置し、ローディングアニメーションの線がloading-mainからはみ出した際に表示させなくするようにしています。
jQuery
最後にjQueryのスクリプトを書きます。（僕の場合、他にファイルを用意せずにHTMLファイルの一番下にscriptタグで読み込ませていました。）
index.html
<script>
$(function() {
var h = $(window).height();
var w = $(window).width();
var centerW = $(window).width();
$(".loading-main").css("margin-top", h / 2 - 150 + "px");
$(".center").css("width", w / 10 * 7 + "px");
$("#title").css("height", h);
var loadingAnime = setInterval(function() {
$(".loading-line").animate({
"left": "500px"
}, 1800).animate({
"left": "-550px"
}, 0);
}, 500);
setTimeout(function() {
$(".loading-main").animate({
"opacity": "0",
}, 1000);
}, 5000);
setTimeout(function() {
$(".loading-main").css("display", "none");
$(".main").css({
"opacity": 0,
"display": "block",
});
}, 6000);
setTimeout(function() {
$(".main").animate({
"opacity": "1",
}, 1000);
}, 6100);
});
</script>
最初の3行は値の定義、次の3行もloading-mainやcenterの要素画面中央に寄せるためのものなのでアニメーションには直接関わってきません。
このスクリプトでは、最初の関数でsetIntervalメソッドとanimateメソッドを使いloading-line要素を左から右へ動かし、その次の関数でsetTimeoutメソッドで文字と線をフェードアウトさせています。そして最後も2番目と同様にsetTimeoutメソッドでタイトルをフェードインさせています。
setIntervalは特定のfunction内の処理を一定の間隔で繰り返すときに、setTimeoutはfunction内の処理を何秒後に実行するかを指定できます。これらは他のアニメーションを作るときにも便利です！
最後に
今回は簡単なローディングアニメーションをjQueryを使って作る方法を解説してみました。今後サイトを作る際に参考にしてみてください！
↧