no-image

JavaScript

マウスの動きに連動するテキストシャドウ「Direction-aware text-shadow」

Direction-aware text-shadowは、マウスの動きに連動するテキストシャドウを実装できるチュートリアルです。マウスの動きに合わせてシャドウの方向も変化します。インタラクティブなテキストシャドウを取り入れたい人には参考になりますね。

Direction-aware text-shadow

Direction-aware text-shadow

デモでは、404と書かれたテキストにマウスオーバーするとシャドウが表示されます。そのままマウスを動かすことで、その方向とは反対側にシャドウが動いていきます。例えば、マウスカーソルを上に持っていくとテキストの下にシャドウがくる感じです。

また、マウスカーソルに近いところにはライトを照射させたようなエフェクトも加わります。テキストにスポットを当てると同時にシャドウも加わるので、手の込んだテキストを表示させたい時に参考にしてみてはいかがでしょうか?

マークアップや使い方もシンプルなので、手軽に実装できそうですね。というわけで、マウスの動きに連動するテキストシャドウやライトエフェクトを実装できる「Direction-aware text-shadow」の紹介でした。

Timeline水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」前のページ

Bootstrapを使ったレスポンシブなページネーション「rpage」次のページrpage

関連記事

  1. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  2. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  3. Zoomify

    JavaScript

    画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

    Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのた…

  4. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  5. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  6. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP