↓↓↓ クリックしてみてね ↓↓↓
ページに表示される正方形の要素が左から右にアニメーションで移動し、ボタンをクリックすることでアニメーションを開始または停止できるウェブページが作成されます。
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;
}
}
