Shine

JavaScript

ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

ShineというJavaScriptライブラリが素敵だったのでメモがてらご紹介。shine.jsを使うとテキストに美しいシャドウをつけることができます。ただシャドウがつくだけではなくて、ダイナミック(動的)なアニメーションで立体感のあるシャドウを演出することができます。

[ads_center]

Shine

Shine

shine.js

実際のデモではマウスに追従してシャドウが動きます。シャドウが動くことでテキストがより一層立体的に見えますね。

シャドウ自体カスタマイズすることもできます。

デモ画面の右上にあるOpen Controlsをクリックすると、こんな感じでシャドウを調整できるメニューが出てくるので、ここでどんな見え方がするのかを試してみるとよさそうです。

シャドウ調整

ダイナミックでカスタマイズ可能なシャドウを実装したい時にいかがでしょうか?

WordPressでmicrodataを使ったパンくずリストWordPressでパンくずリストをmicrodataを使ってマークアップするやり方前のページ

異なる高さを揃えてくれるレスポンシブ対応のjQueryプラグイン「jquery.matchHeight.js」次のページjquery.matchHeight.js

関連記事

  1. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  2. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  3. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  4. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  5. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

  6. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP