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

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  2. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  3. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  4. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  5. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  6. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

最近の記事

  1. チキンバターマサラとシュリンプバターマサラ
  2. 恵比寿のダ・ミケーレのピザ
  3. ハムエッグホットサンドとドリップコーヒー
  4. 高輪ゲートウェイ駅のスタバ
  5. 新幹線

アーカイブ

PAGE TOP