Spot.js

spot.js

Web サイト内の要素に対するマウスの位置を追跡します。spot.js を使用すると、次のことができます。

• CSS クラスを追加する " Web サイト上の任意の要素に「spot-shadow」を追加すると、マウスの位置を基準にして動的な影が自動的に作成されます。
• Web サイト上の任意の要素に CSS クラス「spot-rotate」を追加すると、要素がどこに面しても自動的に回転します。マウスは次のとおりです。
• 要素の水平軸を基準としたマウスの角度を追跡します。
• 要素の中心を基準としたマウスの距離を追跡します。
• オンスクリーンで簡単に開発できますCSS クラス「spot-indicator」を Web サイト上の任意の要素に追加することで、ヘルパーを追加します。
• CSS 変換を使用してマウス イベントをクリエイティブにします。

ライブデモ

Spot.js のライブデモはここをクリックしてください

インストール

spot.js を追加しますHTML ドキュメントに script タグを付けます:

<script src="spot.js"></script>

そして出来上がりです。次のクラスを Web サイト上の任意の要素に追加して、さまざまな効果を作成できるようになりました:

• スポットシャドウ: 要素に 動的ドロップシャドウマウスの動きに応じて変化するフィルターを使用して、マウス カーソルからの光をシミュレートします。フィルターを使用します:drop-shadow();
• spot-rotate: この CSS クラスは、マウス カーソルの方向を向くように要素を回転し、マウスの移動時に更新します。変換: 回転を使用します。
• スポットインジケーター: 選択した要素に役立つ デバッグ オーバーレイを追加します。表示される情報は、マウス カーソルと要素の中心の間の距離、およびマウス カーソルが各瞬間に立っている角度 (要素の中心からの水平軸に関連する) を表します。
• spot-area: この CSS クラスを任意の要素に追加して、spot.js がマウス移動イベントをリッスンする場所を制限します。このクラスが指定された要素がない場合、ウィンドウ全体がマウス移動イベントをリッスンします。

現在の開発目標

このライブラリにはさらに多くのエフェクトを追加する予定です。独自のアイデアで自由に貢献してください。
取り組む必要のあるパフォーマンスの問題がいくつかあります。これは主に CSS フィルターの性質によるものですが、スロットリング機能を改善して、おそらく requestAnimationFrame(); などを使用することもできると思います。提案は大歓迎です。
シャドウ効果は回転効果と一緒にうまく機能しません。

ライセンス

ライセンスの権利と制限 (MIT) については、LICENSE ファイルを参照してください。

お気軽にコラボしてください!