10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Qiita株式会社Advent Calendar 2024

Day 1

イースターエッグなどに使えそうなスタイルを考えてみた

Last updated at Posted at 2024-12-25

この記事の概要

目的もなくコードを触っていたら、イースターエッグ(ゲームやソフトウェアの隠し要素)的に使えそうなスタイルができました。

あまり詰められていませんが、これをベースに何か面白い表現も作れそうな気がしています。

完成形

ライト(マウスカーソル)を動かして、カーソルのある部分だけ文章が読める、というものです。

コード

関係のある部分だけ抜き出しています。

HTML
<body>
  <div class="container">
    <div id="stalker1" class="stalker background"></div>
    <div class="contents">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <!-- 以降文章が続く -->
    </div>
    <div id="stalker2" class="stalker foreground"></div>
  </div>
</body>
CSS
body {
  cursor: none;
}

.container {
  --color: #1e1e1e;
  background-color: var(--color);
  color: var(--color);
}

.contents {
  position: relative;
}

.stalker {
  --size: 240px;
  pointer-events: none;
  position: fixed;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  top: calc(-1 * var(--size) / 2);
  left: calc(-1 * var(--size) / 2);
  background: rgb(255 255 255 / 0.5);
  mix-blend-mode: screen;
  transition: transform 50ms ease-out;
}

.stalker.background {
  filter: blur(96px);
}

.stalker.foreground {
  filter: blur(32px);
}
JavaScript
const stalkers = ["stalker1", "stalker2"];

document.addEventListener("mousemove", (e) => {
  stalkers.forEach((id) => {
    const stalker = document.getElementById(id);
    stalker.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
  });
});

解説

デフォルトでは背景も文字色もまったく同じ色なので、目を凝らしても読めません。

マウスストーカーとして、背景だけを照らすものと、背景と文字を両方照らすものの2つを用意します。
また、背景だけを照らすものはボケを大きくし、前景を照らすものはボケを小さくし、光の当たった表情を若干リアルに表現しています。
(マウスストーカーそのものはよくある作りなので、特に解説することもありません。)

z-indexを使っても良いですが、今回は単に要素の順番に気をつければ良いだけだったので使っていません。

一応カスタムプロパティを使って再利用できる部分はしながら書いています。

10
0
0

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
10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?