エンジニアとしての市場価値を測りませんか?PR

企業からあなたに合ったオリジナルのスカウトを受け取って、市場価値を測りましょう

7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【超簡単!】絶対に使わない逃げるリンクの作り方

Posted at

初め

ふと、思ったんですね。踏めないリンクがあったらなって

作り方

使用言語

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';
}


完成動画

ダウンロード.gif

おまけ

光の速さでマウスを動かしてクリアした人のためにリンク先のページも作っておきます

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;

気になる方は作って検証してみてください

7
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
junta_takenochi

@junta_takenochi

2024年に未経験からエンジニアへ。現在は佐渡島でworpdressなどwebエンジニアとして働いてます

Comments

diywmk9
@diywmk9

transitionを指定すれば、より逃げている感じになるかと思います。

index.html
<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset='UTF-8'>
    <title>逃げるaタグ</title>
    <style>
    #nigeteruLink {
      position: absolute;
      transition: 100ms ease-out;
      top: calc(100% / 2);
      left: calc(100% / 2 - 80px);
    }
    </style>
  </head>
  <body>
    <a href='goal.html' id='nigeteruLink'>クリックしてみて!</a>
    <script>
    nigeteruLink.addEventListener('mouseover',
      e => Object.assign(e.target.style, {
        left: `${Math.random() * (window.innerWidth - e.target.offsetWidth)}px`,
        top: `${Math.random() * (window.innerHeight - e.target.offsetHeight)}px`,
      })
    );
  </script>
</body>
</html>
0

Let's comment your feelings that are more than good

Qiita Conference 2024 Autumn will be held!: 11/14(Thu) - 11/15(Fri)

Qiita Conference is the largest tech conference in Qiita!

Keynote Speaker

Takahiro Anno, Masaki Fujimoto, Yukihiro Matsumoto(Matz), Shusaku Uesugi / Nicolas Ishihara(Vercel Inc.)

View event details

Being held Article posting campaign

7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address