↓↓↓ クリックしてみてね ↓↓↓
ページに表示される正方形の要素が左から右にアニメーションで移動し、ボタンをクリックすることでアニメーションを開始または停止できるウェブページが作成されます。
HTML (index.html):
HTMLの基本的な構造です。外部スタイルシート（style.css）と外部JavaScriptファイル（script.js）を読み込んでいます。
ページには .box というクラス名を持つ <div> 要素があり、この要素にアニメーションを適用します。
ページには “アニメーション開始” と “アニメーション停止” の2つのボタンもあり、これらのボタンをクリックすることでアニメーションの制御が行われます。
CSS (style.css):
.box クラスに対するスタイルを定義しています。このスタイルは .box クラスを持つ要素に適用されます。
.box は正方形の要素で、背景色が青色です。
@keyframes ルールを使用して、slide というアニメーションを定義しています。このアニメーションは、要素を左から右に移動させるもので、animation-name、animation-duration、animation-iteration-count、animation-direction などのプロパティで設定が行われています。
JavaScript (script.js):
JavaScriptはアニメーションを制御するためのロジックを提供しています。
document.querySelector('.box') を使用して、HTML内の .box クラスを持つ要素を取得しています。
startAnimation() 関数は “アニメーション開始” ボタンがクリックされたときに呼び出され、animationPlayState プロパティを 'running' に設定してアニメーションを開始します。
stopAnimation() 関数は “アニメーション停止” ボタンがクリックされたときに呼び出され、animationPlayState プロパティを 'paused' に設定してアニメーションを停止します。
コード
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<br>
<center><div class="box"></div></center>
<br>
<center>
<button onclick="startAnimation()">アニメーション開始</button>
<button onclick="stopAnimation()">アニメーション停止</button>
</center>
<script src="script.js"></script>
</body>
</html>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
position: relative;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide {
0% {
left: -100px;
}
100% {
left: 100px;
}
}
const box = document.querySelector('.box');
let animationIsRunning = false;
function startAnimation() {
if (!animationIsRunning) {
box.style.animationPlayState = 'running';
animationIsRunning = true;
}
}
function stopAnimation() {
if (animationIsRunning) {
box.style.animationPlayState = 'paused';
animationIsRunning = false;
}
}
