Q&A
同一の方ならマルチポストですね。
[クリックで画像が出現する処理をどう書けばよいですか？ - Qiita]
https://qiita.com/codeazuki/questions/dadc116cbe4d631697aa
クリックで画像がランダムに出現する処理はどのように書けばよいですか？
https://suisei-inc.com/
上記サイトのように、イラストがカーソルを遅れて追いかけながら、かつ画面をクリックするごとに、そこからランダムに画像が出現する、そして、５枚ほど登場した時点で、自然にフェードアウトする繰り返し処理を書きたいです。
回答2件
0
ベストアンサー
「マウスストーカー javascript」で検索したところ、以下のページが見つかりました。
マウスストーカーの作り方を解説（Vanilla JSで） | ブログ | 静岡県のホームページ制作 | 6666666 セブンシックス
「クリックした場所に画像を表示 javascript」で検索したところ、以下のページが見つかりました。
「ランダムに画像を表示 javascript」で検索したところ、以下のページが見つかりました。
【JavaScript】画像をランダムに表示させる方法 #初心者 - Qiita
「フェードアウト javascript」で検索したところ、以下のページが見つかりました。
【CSS】【JavaScript】フェードイン・フェードアウト #transition - Qiita
teratailの回答では、提示したページほど初心者向けの細かい解説は得られないと思います。
ひとまず試してみて、もう少し具体的につまづいたことができたら、また質問してみてはいかがでしょうか。
また、このような質問には、生成AIサービスはかなり頼りになると思いますので、こちらも試してみてください。
投稿2024/09/25 14:25
総合スコア37595
ありがとうございます。このコードで試したのですが、イラストが最後までマウスを追いかけません。どのように改善すべきでしょうか？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カーソル追従イラストとランダム画像</title>
<style>
body {
margin: 0;
position: relative;
height: 200vh;
width: 100%;
background-color: #e97d7d;
}
#hero {
width: 100vw;
height: 120vh;
background-color: rgb(129, 125, 236);
margin-top: 0;
position: absolute;
}
.illustration {
position: absolute;
pointer-events: none;
will-change: transform;
z-index: 5;
display: none;
}
.active {
display: block;
}
.random-image {
position: absolute;
transition: opacity 0.5s linear;
opacity: 1;
}
* {
outline: 2px solid red;
}
</style>
</head>
<body>
<img src='https://via.placeholder.com/50x50/000000/ffffff?text=Cursor' alt="" class="illustration">
<div id="hero">
</div>
<script>
var mouseX = window.innerWidth / 2;
var mouseY = window.innerHeight / 2;
var illustrationX = mouseX;
var illustrationY = mouseY;
const illustration = document.querySelector(".illustration");
illustration.onload = function () {
illustrationX = mouseX;
illustrationY = mouseY;
updateIllustration();
};
// 遅延付きでイラストの位置を更新★
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('mousemove', onMouseMove);
function onMouseMove(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
hero.addEventListener('mouseover', () => handlerMouseStoker(true));
hero.addEventListener('mouseout', () => handlerMouseStoker(false));
function handlerMouseStoker(isActive) {
illustration.classList.toggle('active', isActive);
}
// 画像を管理する配列
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'
];
// クリック時にランダム画像を生成
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>
マルチポストもアレだが、放置して次に同じような質問を上げるのは「回答しなくていい」と言っているようなもの。せめて閉じてから次の質問をするようにお願いします
0
[香車]東上☆Aho(暎帆)☆海美「これは『丸投げ』という奴では ?」
投稿2024/09/25 12:35
総合スコア564
あなたの回答
tips
プレビュー
