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. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  2. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  3. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  4. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  5. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  6. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP