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. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  3. CSS Emoticons
  4. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  5. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

  6. Changing Background Color while scrolling

最近の記事

  1. ベルボン Mシリーズ
  2. ネック冷却ファン NRF10
  3. Kindle 8GBモデル
  4. プロテクティングクロス PC-E2
  5. インナーソフトボックス 02

アーカイブ

PAGE TOP