no-image

JavaScript

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

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

Direction-aware text-shadow

Direction-aware text-shadow

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

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

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

関連記事

  1. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  2. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  3. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  4. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  5. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  6. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP