HTML上でオブジェクトを蛇行移動させてみます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>選択した画像を蛇行移動</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: lightskyblue;
font-family: Arial, sans-serif;
}
.image-container {
position: absolute;
width: 240px;
height: 180px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
/* border-radius: 10px; 画像を角丸の場合 */
}
.upload-container {
position: fixed;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div class="upload-container">
<label for="imageUpload">画像を選択:</label>
<input type="file" id="imageUpload" accept="image/*">
</div>
<div class="image-container"
id="imageContainer" style="display: none;">
<img id="uploadedImage" src="" alt="選択した画像">
</div>
<script>
const imageUpload =
document.getElementById('imageUpload');
const imageContainer =
document.getElementById('imageContainer');
const uploadedImage =
document.getElementById('uploadedImage');
let x = 0; // 横位置
let amplitude = 100; // 蛇行の高さ
let frequency = 0.02; // 蛇行の速さ
let speed = 3; // 横方向の移動速度
let angle = 0; // サイン波の角度（初期値）
// 画面サイズの取得
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// アニメーションの実行
function moveImage() {
if (imageContainer.style.display === "none") return;
// Math.sin() を使用して蛇行するサイン波の動きを作成
let y = Math.sin(angle) *
amplitude + screenHeight / 2 - 50; // サイン波で上下
imageContainer.style.transform =
`translate(${x}px, ${y}px)`;
x += speed; // X座標を更新
angle += frequency; // 角度を進める
// 画面右端に達したら左端に戻す
if (x > screenWidth) {
x = -100; // 左端に戻す
}
requestAnimationFrame(moveImage); // 次のフレーム
}
// ファイル選択イベント
imageUpload.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
uploadedImage.src = e.target.result;
imageContainer.style.display = 'block';
x = 0; // 初期位置にリセット
moveImage(); // アニメーション開始
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
表示すると動かすファイルを求めてきます。
ファイルを指定すれば左から右に蛇行しながら進みます。
