ローディングアニメーションを1回のみ表示し
ユーザーアビリティを向上させましょう #2/2
はじめに
概要
ローディングアニメーションは、初めて訪れるユーザーに強い印象を与えるためのものです。しかし、2回目以降はロード時間が長くなり、逆にユーザーに不満を与える可能性があります。そこで、Javascriptでブラウザのキャッシュをコントロールし、ローディングアニメーションを1回のみ表示する方法を実装します。サンプルコードを配布してますのでぜひ活用してください。実装には前回のコードを使用しますのでそちらも参考ください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
実装動画
実装する内容は以下の動画を参照ください。
サンプルコード
こちらが上記の動画のサンプルコードです。
Javascript
class Main {
constructor() {
this._loading();
}
_loading() {
document.addEventListener("DOMContentLoaded", () => {
var webStorage = function () {
if (sessionStorage.getItem("access")) {
/*
2回目以降アクセス時の処理
*/
// ここに記述します
} else {
/*
初回アクセス時の処理
*/
sessionStorage.setItem("access", "true"); // sessionStorageにデータを保存
// ここに記述します
}
};
webStorage();
});
}
}
new Main();
class Main {
constructor() {
this._loading();
}
_loading() {
document.addEventListener("DOMContentLoaded", () => {
var webStorage = function () {
if (sessionStorage.getItem("access")) {
/*
2回目以降アクセス時の処理
*/
// ここに記述します
} else {
/*
初回アクセス時の処理
*/
sessionStorage.setItem("access", "true"); // sessionStorageにデータを保存
// ここに記述します
}
};
webStorage();
});
}
}
new Main();
class Main {
constructor() {
this._loading();
}
_loading() {
document.addEventListener("DOMContentLoaded", () => {
var webStorage = function () {
if (sessionStorage.getItem("access")) {
/*
2回目以降アクセス時の処理
*/
// ここに記述します
} else {
/*
初回アクセス時の処理
*/
sessionStorage.setItem("access", "true"); // sessionStorageにデータを保存
// ここに記述します
}
};
webStorage();
});
}
}
new Main();ブラウザのキャッシュを活用したコードはこちらです。
上部に2回目のコードを記述し、下部に初回のコードを記述します。
コードの解説
初回のコード
// ここに記述します
const loading = gsap.timeline();
loading
.to(".loading", {
// ロード時のチラつきの対策
display: "block",
})
.from(
".js_1",
1,
{
opacity: 0,
y: 50,
},
2
)
.to(".js_1", 1, {
delay: 0.5,
opacity: 0,
y: 50,
})
.to(".js_2", 1, {
display: "none",
})
.to(".js_3", 1, {
display: "block",
opacity: 1,
visibility: "visible",
y: -10,
delay: 1,
});
// ここに記述します
const loading = gsap.timeline();
loading
.to(".loading", {
// ロード時のチラつきの対策
display: "block",
})
.from(
".js_1",
1,
{
opacity: 0,
y: 50,
},
2
)
.to(".js_1", 1, {
delay: 0.5,
opacity: 0,
y: 50,
})
.to(".js_2", 1, {
display: "none",
})
.to(".js_3", 1, {
display: "block",
opacity: 1,
visibility: "visible",
y: -10,
delay: 1,
});
// ここに記述します
const loading = gsap.timeline();
loading
.to(".loading", {
// ロード時のチラつきの対策
display: "block",
})
.from(
".js_1",
1,
{
opacity: 0,
y: 50,
},
2
)
.to(".js_1", 1, {
delay: 0.5,
opacity: 0,
y: 50,
})
.to(".js_2", 1, {
display: "none",
})
.to(".js_3", 1, {
display: "block",
opacity: 1,
visibility: "visible",
y: -10,
delay: 1,
});ローディングアニメーションチラつきの対策
こちらは前回実装したコードを添付しております。１点変更したのは、loadingアニメーションのチラつきが発生していたため、CSSで調整しGsapでdisplay:blockで対応しております。
２回目のコード
// ここに記述します
const mv = gsap.timeline();
mv.to("#global-container", 1, {
opacity: 1,
visibility: "visible",
display: "block",
}).from(
"#global-container",
{
y: 50,
},
"<"
);
// ここに記述します
const mv = gsap.timeline();
mv.to("#global-container", 1, {
opacity: 1,
visibility: "visible",
display: "block",
}).from(
"#global-container",
{
y: 50,
},
"<"
);
// ここに記述します
const mv = gsap.timeline();
mv.to("#global-container", 1, {
opacity: 1,
visibility: "visible",
display: "block",
}).from(
"#global-container",
{
y: 50,
},
"<"
);こちらもシンプルで、Gsapのtimelineを使用して記述しております。timelineについてはこちらを参照ください。
以上です。お疲れ様でした。実装はできましたでしょうか？何か疑問点やご質問がございましたらお気軽にご連絡ください。お問い合わせフォームはこちら
まとめ
- ブラウザのキャッシュを活用し、アニメーションを１回のみとする
- Javascriptのコードを使用する
- 初回のコード並びに2回目のコードそれぞれ記述する
- アニメーションにはGsapが便利
