クリックで画像が出現する処理をどう書けばよいですか？
Q&A
Closed
クリックで画像がランダムに出現する処理はどのように書けばよいですか？
https://suisei-inc.com/
上記サイトのように、イラストがカーソルを遅れて追いかけながら、かつ画面をクリックするごとに、そこからランダムに画像が出現する、そして、５枚ほど登場した時点で、自然にフェードアウトする繰り返し処理を書きたいです。
0
2Answer
※この記事は機械翻訳により日本語に翻訳されています。
どのプログラミング言語を使用するか指定されていなかったので、JSとHTMLをベースにした例をここに示します。この種の質問に対しては、ChatGPTや他の有名な大規模言語モデル（LLM）が簡単にコードを提供できることに注意してください。これは私がo1-previewモデルから得た例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カーソル追従イラストとランダム画像</title>
<style>
body {
margin: 0;
overflow: hidden;
position: relative;
height: 100vh;
background-color: #f0f0f0;
}
.illustration {
position: absolute;
pointer-events: none;
will-change: transform;
}
.random-image {
position: absolute;
transition: opacity 0.5s linear;
opacity: 1;
}
</style>
</head>
<body>
<script>
// カーソルの位置を保持する変数
var mouseX = window.innerWidth / 2;
var mouseY = window.innerHeight / 2;
var illustrationX = mouseX;
var illustrationY = mouseY;
// 画像を管理する配列
var imagesArray = [];
// クリック回数をカウントする変数
var clickCounter = 0;
var maxClicks = 6; // 6回目のクリック後に画像がフェードアウト
// ランダム画像のURL配列
var randomImages = [
'https://via.placeholder.com/100x100/ff0000/ffffff?text=1',
'https://via.placeholder.com/100x100/00ff00/ffffff?text=2',
'https://via.placeholder.com/100x100/0000ff/ffffff?text=3',
'https://via.placeholder.com/100x100/ffff00/ffffff?text=4',
'https://via.placeholder.com/100x100/00ffff/ffffff?text=5'
];
// イラスト要素を作成
var illustration = document.createElement('img');
illustration.src = 'https://via.placeholder.com/50x50/000000/ffffff?text=Cursor';
illustration.classList.add('illustration');
document.body.appendChild(illustration);
// イラスト画像の読み込み後
illustration.onload = function () {
illustrationX = mouseX;
illustrationY = mouseY;
updateIllustration(); // アニメーションを開始
};
// マウス位置の更新
document.addEventListener('mousemove', onMouseMove);
function onMouseMove(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
// 遅延付きでイラストの位置を更新
function updateIllustration() {
var dx = mouseX - illustrationX;
var dy = mouseY - illustrationY;
var delayFactor = 0.1; // 遅延の調整
illustrationX += dx * delayFactor;
illustrationY += dy * delayFactor;
illustration.style.transform = 'translate(' + (illustrationX - illustration.width / 2) + 'px, ' + (illustrationY - illustration.height / 2) + 'px)';
requestAnimationFrame(updateIllustration);
}
// クリック時にランダム画像を生成
document.addEventListener('click', onClick);
function onClick(event) {
clickCounter++; // クリックカウンターを増加
var randomImage = document.createElement('img');
var randomIndex = Math.floor(Math.random() * randomImages.length);
randomImage.src = randomImages[randomIndex];
randomImage.classList.add('random-image');
randomImage.style.opacity = 1;
document.body.appendChild(randomImage);
// 画像の読み込み後に位置を設定
randomImage.onload = function () {
randomImage.style.left = (mouseX - randomImage.width / 2) + 'px';
randomImage.style.top = (mouseY - randomImage.height / 2) + 'px';
};
// 画像を配列に追加
imagesArray.push(randomImage);
// 6回目のクリック後に全ての画像をフェードアウト
if (clickCounter === maxClicks) {
imagesArray.forEach(function(image) {
image.style.opacity = 0;
// フェードアウト後にDOMから削除
image.addEventListener('transitionend', function () {
if (image.parentNode) {
image.parentNode.removeChild(image);
}
});
});
// 配列をクリア
imagesArray = [];
// クリックカウンターをリセット
clickCounter = 0;
}
}
</script>
</body>
</html>
コードの説明
カーソル追従イラスト
- マウスの位置を追跡し、遅延を持たせてイラストが追従するようにしています。
-
updateIllustration関数でイラストの位置を更新しています。
ランダム画像の生成
- クリックごとに
onClick関数が呼ばれ、ランダムな画像を生成します。 - 画像はクリックした位置（カーソル位置）に配置されます。
画像のフェードアウトとサイクルのリセット
- クリックカウンターを導入し、6回目のクリックで全ての画像がフェードアウトします。
- フェードアウト後、画像はDOMから削除され、クリックカウンターがリセットされます。
- 次のクリックから新たなサイクルが始まります。
注意事項
カスタマイズ
-
randomImages配列やillustration.srcを変更して、お好みの画像に差し替えることができます。 -
maxClicksの値を変更することで、フェードアウトが起こるクリック回数を調整できます。
スタイルの調整
- CSS内の
transitionプロパティを変更して、フェードアウトの速度を調整できます。
0Like
Comments
@codeazuki
Questioner
丁寧なご説明ありがとうございます。範囲を決めたいのですが、どのように改善すべきでしょうか？
※この記事は機械翻訳により日本語に翻訳されています。
1) イラストの移動範囲を制限する方法
イラストの位置を更新する際に、X座標とY座標が指定した範囲内に収まるように制限します。まず、範囲を定義する変数を追加します。
// 範囲を定義 var minX = 50; var maxX = window.innerWidth - 50; var minY = 50; var maxY = window.innerHeight - 50;次に、updateIllustration関数内で座標を範囲内に制限します。
function updateIllustration() { var dx = mouseX - illustrationX; var dy = mouseY - illustrationY; var delayFactor = 0.1; // 遅延の調整 illustrationX += dx * delayFactor; illustrationY += dy * delayFactor; // 範囲内に座標を制限 illustrationX = Math.max(minX, Math.min(illustrationX, maxX)); illustrationY = Math.max(minY, Math.min(illustrationY, maxY)); illustration.style.transform = 'translate(' + (illustrationX - illustration.width / 2) + 'px, ' + (illustrationY - illustration.height / 2) + 'px)'; requestAnimationFrame(updateIllustration); }2) ランダム画像の表示範囲を制限する方法
クリック時に表示される画像の位置も範囲内に制限します。
randomImage.onload = function () { var imageX = mouseX - randomImage.width / 2; var imageY = mouseY - randomImage.height / 2; // 範囲内に座標を制限 imageX = Math.max(minX, Math.min(imageX, maxX - randomImage.width)); imageY = Math.max(minY, Math.min(imageY, maxY - randomImage.height)); randomImage.style.left = imageX + 'px'; randomImage.style.top = imageY + 'px'; };これらの修正により、イラストとランダム画像が指定した範囲内に表示されるようになります。
@codeazuki
Questioner
ありがとうございます。改善してみます！！
今回の質問に直接関わる内容ではありませんが、過去の投稿で質問がクローズされた後に解決の経緯が共有されていないものがいくつか見受けられます。
Qiitaの質問は、ガイドラインにもある通り、個々の問題解決だけでなく、他の読者が参考にできる形で情報を残すことも大切です。
クローズにして野放しにするのではなく、解決したのであればどのようにして解決できたのか、顛末まで記載していただけるとありがたいです。
0Like
Comments
@codeazuki
Questioner
失礼しました。解決の経緯をフィードバックとして共有していきます。
ご対応いただきありがとうございます！