Webデザインの世界では、細部にこだわることが重要です。特に、ウェブサイトのローディングアニメーションは、訪問者の最初の印象を大きく左右します。この記事では、STUDIOのカスタムコードを使って、魅力的なローディングアニメーションを作成する方法をご紹介します。
カスタムコードとは？
STUDIOのカスタムコード機能については、こちらの記事で詳細を記載しています↓
ローディングアニメーションとは？
ローディングアニメーションは、ウェブサイトが読み込まれる間に表示される小さなアニメーションで、訪問者のウェブ体験に重要な影響を与えます。読み込み時間があるとき、ローディングアニメーションは訪問者の注意を引きつけ、ウェブサイトに対する期待を高めます。また、うまく設計されたアニメーションは、ウェブサイトのプロフェッショナルさや創造性を示し、ユーザーの忍耐力を支える役割も果たします。読み込み待ちの時間を楽しくすることで、訪問者はサイトのロード時間をより快適に感じることができ、全体的なユーザー体験が向上します。
カスタムコード例
ここでは、実際にSTUDIOで作成したローディングアニメーションのコードを一部ご紹介します。これらのコードは、CSSのアニメーション機能とJavaScriptの動的要素制御を組み合わせています。
今回ご紹介するローディングアニメーションのまとめはこちら！
一般的な回るアニメーション
一つ目に紹介するアニメーションは、よく見る一般的な回転するようなアニメーションです。かなり多くの人が直感的にローディング中であることを瞬時に理解できるデザインです。
HTML、CSS、JavaScriptはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ローディングアニメーション</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
}
.loader {
border: 5px solid rgba(255, 255, 255, 0.3); /* 透明度を持つ白い枠 */
border-top: 5px solid #005FFF; /* 暗い灰色の枠 */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
背景がグラデーションするアニメーション
二つ目に紹介するのは、背景がカラフルにグラデーションし、その手前でローディングの文字が表示されるというものです。明るい雰囲気のWEBサイトへの期待感を高めるようなデザインです。
HTML、CSS、JavaScriptはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Aurora Loading Animation</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0e0e0e;
overflow: hidden;
}
.aurora-loader {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #83eaf1, #63a4ff, #b388ff, #ff8a80, #ff80ab);
background-size: 400% 400%;
animation: auroraEffect 8s ease infinite;
}
@keyframes auroraEffect {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.loading-text {
z-index: 1;
font-size: 2em;
color: rgba(255, 255, 255, 0.7);
animation: textEffect 4s ease infinite;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
@keyframes textEffect {
0%, 100% { color: rgba(255, 255, 255, 0.5); }
50% { color: rgba(255, 255, 255, 0.9); }
}
</style>
</head>
<body>
<div class="aurora-loader"></div>
<div class="loading-text">Loading...</div>
</body>
</html>回転する３Dオブジェクトアニメーション
三つ目に紹介するアニメーションは、回転する３Dオブジェクトの手前にローディングの文字が表示されるというものです。今回は立方体を回転させていますが、それ以外の形状や３Dモデルを回転させることもできるので、他のWEBサイトとは少し違ったユニークな表現ができます。
HTML、CSS、JavaScriptはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Cube Rotation Loading Animation</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f3f3f3;
perspective: 1000px; /* 3D空間の設定 */
}
.cube-loader {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d; /* 3D変換を維持 */
animation: rotateCube 3s infinite linear; /* 回転アニメーション */
}
.cube-loader div {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.9);
animation: changeColor 6s infinite linear; /* 色変更アニメーション */
}
.cube-loader .front { transform: translateZ(50px); }
.cube-loader .back { transform: rotateY(180deg) translateZ(50px); }
.cube-loader .left { transform: rotateY(-90deg) translateZ(50px); }
.cube-loader .right { transform: rotateY(90deg) translateZ(50px); }
.cube-loader .top { transform: rotateX(90deg) translateZ(50px); }
.cube-loader .bottom { transform: rotateX(-90deg) translateZ(50px); }
@keyframes rotateCube {
0% { transform: rotateX(0) rotateY(0); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes changeColor {
0% { background: rgba(255, 0, 0, 0.6); }
25% { background: rgba(0, 255, 0, 0.6); }
50% { background: rgba(0, 0, 255, 0.6); }
75% { background: rgba(255, 255, 0, 0.6); }
100% { background: rgba(255, 0, 0, 0.6); }
}
.loading-text {
position: absolute;
top: 150px; /* 調整された位置 */
font-size: 1.5em;
color: #000;
animation: fadeInOut 2s linear infinite;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
</style>
</head>
<body>
<div class="cube-loader">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="loading-text">Loading...</div>
</body>
</html>グリッチ風アニメーション
最後は、グリッチ風にローディングの文字が表示されるものになります。グリッチのようなデザインを採用している個性的なサイトのローディング画面で採用することで、サイト全体の統一感を演出することができます。
HTML、CSS、JavaScriptはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Neon Sign Loading Animation</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0e0e0e;
}
.neon-text {
font-size: 3em;
color: #8CFFFB;
text-shadow:
0 0 5px #8CFFFB,
0 0 15px #8CFFFB,
0 0 20px #8CFFFB,
0 0 25px #8CFFFB,
0 0 30px #8CFFFB;
animation: neonFlicker 1.5s infinite alternate;
}
@keyframes neonFlicker {
0%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 100% {
text-shadow:
0 0 5px #8CFFFB,
0 0 15px #8CFFFB,
0 0 20px #8CFFFB,
0 0 25px #8CFFFB,
0 0 30px #8CFFFB;
color: #8CFFFB;
}
20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38% {
text-shadow: none;
color: #2E3A3F;
}
}
</style>
</head>
<body>
<div class="neon-text">Loading</div>
</body>
</html>【宣伝】ココナラで出品中のサービス紹介
私のココナラでのサービス「STUDIOを用いたWEBサイト作成サービス」では、このようなカスタムコードを駆使したウェブデザインを提供しています。クライアントのニーズに合わせたオーダーメイドのデザインを実現します。
また、STUDIOのカスタムコード部分のみの依頼も受け付けています。サイト全体のデザインだけでなく、特定の機能やエレメントのカスタマイズも可能ですので、お気軽にご相談ください。
今回ご紹介するカスタムコードを含めた過去に作成したデザインコンポーネントは、下記のWEBサイトにまとめてあります。ご興味ございましたらご覧ください！
まとめ
この記事では、STUDIOのカスタムコードを使用して、魅力的なローディングアニメーションを作成する方法を紹介しました。ローディングアニメーションは、ウェブサイトの初印象を決定づけ、ユーザー体験を向上させる重要な要素です。STUDIOのカスタムコード機能を活用すれば、STUDIOを用いたウェブデザインの可能性は無限に広がります。ご興味のある方は、ぜひご連絡ください！
コメント