TVアニメ「86-エイティシックス-」のウェブサイトのマウスカーソルが凝っていたので,どうやって実装しているか見てみました.
トップページでマウスを移動させると,赤いような青いような円形のカーソルが追従します.よく見ると背景によって色が変わるようになっています.
カーソルの html はこのようになっていました..l-cursor__deco
と.l-cursor__point
にマウスカーソルの座標を javascript で書き込む仕組みのようです.
<div class="l-cursor js-cursor"> <div class="l-cursor__deco js-cursor-bg" style="transform: translate(898px, 1132px);"> <div class="l-cursor__outer"> <div class="l-cursor__outer-deco"> <span></span> <span></span> </div> </div> <div class="l-cursor__inner"> <div class="l-cursor__cross"></div> </div> </div> <div class="l-cursor__point js-cursor-point" style="transform: translate(898px, 1132px);"></div> </div>
以下のような CSS が設定されています.
https://anime-86.com/assets/css/86.default.css より引用.
.l-cursor__point { position: fixed; top: -3px; left: -3px; z-index: 20; z-index: 15; mix-blend-mode: difference; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; width: 6px; height: 6px; pointer-events: none; } .l-cursor__deco { position: fixed; top: -25px; left: -25px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; z-index: 20; z-index: 15; mix-blend-mode: difference; -webkit-transition: opacity 0.4s ease, -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.4s ease, -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.4s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.4s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 50px; height: 50px; pointer-events: none; }
z-index
が2回指定されているのはよく分かりませんが,mix-blend-mode
が重要そうです.
mix-blend-mode - CSS: Cascading Style Sheets | MDN
CSS の解説を読んでも使い所がよく分からない機能ですが,このようなデザインのウェブサイトで効果的に使えることが分かりました.
ブラウザーの対応状況を確認すると,最近のブラウザーならば広く対応しているようです.
https://caniuse.com/?search=mix-blend-mode