テックコード -web関連の情報サイト- 
JavaScriptを使ったアニメーションは、ウェブページをより動的で魅力的にするための強力な手段です。ここでは、初心者でも簡単に理解できるように、基本的なアニメーションのサンプルコードとその説明を紹介します。
1. 基本的な要素の移動アニメーション
まず、簡単な要素を左から右に移動するアニメーションを見てみましょう。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Animation</title>
<style>
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50%;
left: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="animation.js"></script>
</body>
</html>
JavaScript (animation.js)
const box = document.getElementById('box');
let position = 0;
function move() {
position += 1;
box.style.left = position + 'px';
if (position < window.innerWidth - 50) { // boxの幅を引く
requestAnimationFrame(move);
}
}
move();
説明
#boxというIDを持つ赤い四角形の要素を作成します。position変数を使って、ボックスの位置を追跡します。move関数を使って、ボックスを1pxずつ右に移動させます。requestAnimationFrameを使って、次のアニメーションフレームを呼び出します。これにより、スムーズなアニメーションが実現します。
2. フェードイン・フェードアウトアニメーション
次に、要素をフェードイン（徐々に表示）およびフェードアウト（徐々に非表示）させるアニメーションを見てみましょう。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade Animation</title>
<style>
#box {
width: 50px;
height: 50px;
background-color: blue;
opacity: 0;
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>
<script src="animation.js"></script>
</body>
</html>
JavaScript (animation.js)
const box = document.getElementById('box');
function fadeIn() {
box.style.opacity = 1;
}
function fadeOut() {
box.style.opacity = 0;
}
説明
#box要素の初期の透明度を0に設定し、transitionプロパティを使って透明度が変化する際に1秒間かけるように設定します。fadeIn関数を呼び出すと、opacityが1に設定され、ボックスが1秒間かけて表示されます。fadeOut関数を呼び出すと、opacityが0に設定され、ボックスが1秒間かけて非表示になります。
3. 要素の回転アニメーション
次に、要素を回転させるアニメーションを見てみましょう。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<style>
#box {
width: 50px;
height: 50px;
background-color: green;
transition: transform 1s;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="rotate()">Rotate</button>
<script src="animation.js"></script>
</body>
</html>
JavaScript (animation.js)
const box = document.getElementById('box');
let angle = 0;
function rotate() {
angle += 90;
box.style.transform = `rotate(${angle}deg)`;
}
説明
#box要素のtransformプロパティを使って、回転するアニメーションを設定します。rotate関数を呼び出すと、ボックスの角度を90度ずつ回転させます。transitionプロパティを使って、回転が1秒間かけて行われるように設定します。
4. バウンドアニメーション
最後に、要素を上下にバウンドさせるアニメーションを見てみましょう。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bounce Animation</title>
<style>
#box {
width: 50px;
height: 50px;
background-color: purple;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="animation.js"></script>
</body>
</html>
JavaScript (animation.js)
const box = document.getElementById('box');
let position = 0;
let direction = 1;
function bounce() {
position += direction * 5;
if (position > window.innerHeight - 50 || position < 0) {
direction *= -1;
}
box.style.top = position + 'px';
requestAnimationFrame(bounce);
}
bounce();
説明
#box要素の初期位置を設定します。position変数を使って、ボックスの垂直位置を追跡します。direction変数を使って、ボックスの移動方向を管理します。bounce関数を使って、ボックスを上下に移動させ、ウィンドウの上下端に達したときに方向を反転させます。requestAnimationFrameを使って、次のアニメーションフレームを呼び出します。
まとめ
これらのサンプルコードを使うことで、基本的なJavaScriptアニメーションを簡単に実現できます。フェッチAPIを使ったデータ取得やクラスとオブジェクト指向プログラミング、プロミスと非同期処理など、モダンなJavaScriptの基本をマスターすることで、高度なサイトを開発していきましょう！
アニメーションを使うことで、ウェブページをより動的で魅力的にすることができます。
まずは基本から始めて、徐々に複雑なアニメーションに挑戦してみてください🎵
