この記事の概要
目的もなくコードを触っていたら、イースターエッグ(ゲームやソフトウェアの隠し要素)的に使えそうなスタイルができました。
あまり詰められていませんが、これをベースに何か面白い表現も作れそうな気がしています。
完成形
ライト(マウスカーソル)を動かして、カーソルのある部分だけ文章が読める、というものです。
コード
関係のある部分だけ抜き出しています。
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
を使っても良いですが、今回は単に要素の順番に気をつければ良いだけだったので使っていません。
一応カスタムプロパティを使って再利用できる部分はしながら書いています。