9.1 ホバーエフェクトによるアニメーション
アニメーションはWebサイトでのユーザーエクスペリエンス（UX）の向上に重要な役割を果たすんだよね。ユーザーの関心を引きつけたり、フィードバックを提供したり、ナビゲーションを改良したり、インターフェースをより直感的で使いやすくするために役立つんだ。ここではUX向上のためのアニメーション使用例を見てみよう。
例: ホバー時のボタンアニメーション
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ホバー時のボタンアニメーション</title>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
background-color: #2980b9;
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="button">Hover me</button>
</body>
</html>
コードの解説:
.button: ボタンのスタイルを定義し、ホバー時の背景色やスケールのスムーズな遷移を含む.button:hover: カーソルを合わせるとボタンの背景色が変わり、少し大きくなる
9.2 ローディングアニメーション
ローディングアニメーションは、データのロードや処理が進行中であることをユーザーに示し、待ち時間を感じさせないようにするんだ。
例: ローディングアニメーション
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ローディングアニメーション</title>
<style>
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
コードの解説:
.spinner: スピナーのスタイルを定義し、ボーダーと回転アニメーションを含む@keyframes spin: スピナーが0度から360度回転するアニメーションを定義
9.3 ページ遷移アニメーション
ページやアプリケーションのセクション間の遷移アニメーションは、ユーザーのナビゲーションを助け、よりスムーズなインタラクション体験を作り出すんだ。
例: ページ遷移アニメーション
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページ遷移アニメーション</title>
<style>
.page {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.page.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="page">Content of the page</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.page').classList.add('active');
});
</script>
</body>
</html>
コードの解説:
.page: ページのスタイルを定義し、初期の透明度と下へのシフトを含む.page.active: クラスactiveが追加されると、ページが完全に表示され、元の位置に戻る- JavaScript: ページの読み込み時に
activeクラスが.page要素に追加され、アニメーションを開始
9.4 クリックアニメーション
要素をクリックしたときのアニメーションは、ユーザーにフィードバックを提供し、インタラクションをより楽しいものにすることができるんだ。
例: ボタンのクリックアニメーション
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ボタンのクリックアニメーション</title>
<style>
.button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
コードの解説:
.button: ボタンのスタイルを定義し、スケールのスムーズな遷移を含む.button:active: ボタンがクリックされると、要素が少し縮小し、クリック効果を作り出す
GO TO FULL VERSION