初め
ふと、思ったんですね。踏めないリンクがあったらなって
作り方
使用言語
HTML,CSS,JavaScript
コード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>逃げるaタグ</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="goal.html" id="nigeteruLink">クリックしてみて！</a>
<script src="script.js"></script>
</body>
</html>
style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#nigeteruLink {
position: absolute;
}
script.js
const link = document.getElementById('nigeteruLink');
link.addEventListener('mouseover', moveLink);
function moveLink() {
const x = Math.floor(Math.random() * (window.innerWidth - link.offsetWidth));
const y = Math.floor(Math.random() * (window.innerHeight - link.offsetHeight));
link.style.left = x + 'px';
link.style.top = y + 'px';
}
完成動画
おまけ
光の速さでマウスを動かしてクリアした人のためにリンク先のページも作っておきます
goal.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>おめでとう！</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="fade" id="message1">おめでとう！</p>
<p class="fade" id="message2">でも、</p>
<p class="fade" id="message3">暇なん？</p>
<script src="goal.js"></script>
</body>
</html>
style.css
.fade {
font-size: 30px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.visible {
opacity: 1;
}
goal.js
function fadeSequence() {
const messages = [
document.getElementById('message1'),
document.getElementById('message2'),
document.getElementById('message3')
];
let current = 0;
function showNext() {
if (current > 0) {
// 前のメッセージをフェードアウト
messages[current - 1].classList.remove('visible');
}
if (current < messages.length) {
// 次のメッセージをフェードイン
messages[current].classList.add('visible');
current++;
// 次のメッセージを表示するまでの待機時間（表示時間 + フェード時間）
setTimeout(showNext, 3000); // 3秒間表示
} else {
// 全てのメッセージを表示し終えた後の処理（必要に応じて）
}
}
showNext();
}
// ページ読み込み後にシーケンスを開始
window.onload = fadeSequence;
気になる方は作って検証してみてください