Commune Advent Calendar 2024シリーズ2 4日目の記事です
仕事で下のようなマウスカーソルに追従して薄く光るようなエフェクトを実装したのですが、面白かったので共有します。
「こういうのが作りたい！」とデザイナーさんからFigmaを使って共有されたものなのですが、
当初私は以下のような実装プランで考えていました。
- mousemoveイベントを使う
- イベント発火時にその座標に光要素をを生成(position: absolute)
- 光要素はCSSで徐々にopacityが下がっていく
- 光要素生成後、一定時間が経過したらsetTimeoutを使って要素を削除
この方針でも実装はできそうですが、mousemoveイベントをlistenして処理するのはちょっと負荷がきになります。
JavaScriptで制御しない実装
デザイナーさんに作っていただいたFigmaのDemoをよく見てみると、面白い構成要素になっており、その方針で実装を進めたらかなりそれっぽくなりました。具体的には以下のような感じです。
1. 正方形を並べてhoverで可視化させる
ひたすら正方形のElementを並べ、:hoverを使って、カーソルが正方形の上に乗ったら緑色にする。というようなものを作ります。
hover時に変化させるプロパティはbackground-colorでもopacityでもよいです。
.cell:hover {
opacity: 1;
}
2. blurをかける
blurをかけると光ってるっぽい表現になります。blurをかける前は正方形をかなり小さくしないとカクカク感がでてしまうかと思っていたのですが、
blurをかけることによって要素の位置が曖昧になるので、思ってたよりも正方形を小さくする必要はありませんでした。
blurを強くかけるとめちゃめちゃ薄くなってしまいますが、次の工程で解決するので気にしなくて大丈夫です。
3. transitionを調整する
最後にtransitionをかけていきます。方向性としては
非表示→表示の時: 速く変化する
表示→非表示の時: ゆっくり変化する
となります。
ゆっくりと消えていくため、隣接する要素が重なり、濃く見えるというわけです。
以下のような記述をすることでそのように動作します。
.cell {
...
transition-property: opacity;
transition-duration: 1000ms;
opacity: 0;
}
.cell:hover {
...
transition: background-color 100ms;
opacity: 1;
}
これでJavaScriptによる制御を必要とせずにいい感じの効果を実装することができました。
ただ、この実装だと大量の正方形を並べる必要があるので、DOMの構成コストがやや高そうです。
エリアを制限するなどして上手うのが良さそうです。
おわりに
後で知ったことなのですが、今回の実装はFigma界隈では"hover effect"と呼ばれているようで、それを応用したものらしいです。
Figma界隈はスクリプトを書かずにイケてる表現を実現する試みがたくさんあって、なかなかおもしろそうです。
引き続き色々調べて実装の引き出しを増やしていこうと思いました。
Discussion