はじめに
この記事を読めば、HTMLで図形を動かす方法を学び、カスタマイズができるようになります。
この記事では初心者向けに5つの方法を紹介し、それぞれの使い方、対処法、注意点、カスタマイズ方法を詳しく解説しています。
○方法1：CSSアニメーションを利用
CSSアニメーションを使って図形を動かす方法は、CSSのみで実現可能で初心者にもわかりやすい方法です。
CSSアニメーションは、キーフレームと呼ばれる特定の時間帯でのスタイルを設定し、その間のアニメーションを自動的に生成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 5s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(300px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>○方法2：JavaScriptを使ったアプローチ
JavaScriptを使って図形を動かす方法は、HTML要素に対して直接スタイルを適用することで、動的なアニメーションを実現できます。
この方法では、JavaScriptのイベントリスナーとタイマーを利用して、図形の位置を変更します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const box = document.querySelector('.box');
let xPos = 0;
const moveBox = function () {
xPos += 5;
box.style.left = xPos + 'px';
if (xPos > 300) {
xPos = 0;
}
setTimeout(moveBox, 100);
};
moveBox();
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>○方法3：SVGを利用した図形のアニメーション
SVG（Scalable Vector Graphics）は、ベクター画像を表現するためのXMLベースの言語です。
SVGを利用することで、HTML内で図形を描画し、アニメーションを適用することが可能です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<svg width="500" height="500">
<circle cx="50" cy="50" r="40" fill="green">
<animate attributeName="cx" from="50" to="450" dur="5s" repeatCount="indefinite" />
</circle>
</svg>
</body>
</html>○方法4：HTML5 Canvasを使った図形の動き
HTML5のCanvas要素は、グラフィックスやアニメーションを描画するためのAPIを提供します。
Canvasを使った図形のアニメーションは、JavaScriptで描画を制御するため、高度なアニメーションが可能です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border: 1px solid black;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let xPos = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'orange';
ctx.fillRect(xPos, 50, 100, 100);
xPos += 5;
if (xPos > canvas.width) {
xPos = -100;
}
requestAnimationFrame(draw);
}
draw();
});
</script>
</head>
<body>
<canvas width="800" height="200"></canvas>
</body>
</html>○方法5：CSSとJavaScriptの組み合わせで高度なアニメーション
CSSアニメーションとJavaScriptを組み合わせることで、さらに高度なアニメーションを実現できます。
例えば、マウスオーバー時にアニメーションを開始するなど、イベントに応じたアニメーションが可能です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
transition: transform 1s;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const box = document.querySelector('.box');
box.addEventListener('mouseover', function () {
box.style.transform = 'translateX(300px)';
});
box.addEventListener('mouseout', function () {
box.style.transform = 'translateX(0)';
});
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>●応用例とサンプルコード
下記に紹介した5つの方法を応用し、さまざまな図形のアニメーションを作成できます。
例えば、複数の図形を同時に動かす、回転させる、拡大・縮小するなど、独自のカスタマイズが可能です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
perspective: 1000px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: move 5s linear infinite, rotate 3s linear infinite, scale 2s linear infinite alternate;
}
.circle {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: absolute;
top: 150px;
animation: move 5s linear infinite, rotate 3s linear infinite, scale 2s linear infinite alternate;
}
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(500px); }
}
@keyframes rotate {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
@keyframes scale {
0% { transform: scale(1); }
100% { transform: scale(1.5); }
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="circle"></div>
</div>
</body>
</html>このサンプルコードでは、CSSアニメーションを利用して、赤い四角形と青い円形の図形を同時に動かし、回転させ、拡大・縮小するアニメーションを実現しています。
複数のアニメーションを組み合わせることで、さらにリッチな表現が可能になります。
まとめ
この記事を読めば、HTMLで図形を動かす方法をマスターし、自分だけのオリジナルなアニメーションを作成できるようになります。
5つの方法と応用例を参考に、さまざまな図形やアニメーションを試してみてください。
どんなアイデアでも、実現できる可能性があります。
