Art Text Light jQuery plugin

JavaScript

テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery plugin」

指定したテキストに光が移動するエフェクトを与えることができるjQueryプラグイン「Art Text Light jQuery plugin」を使ってみました。さりげないエフェクトがとてもお洒落ですね。ワンポイントとしてどこかで使いたくなってきます。ということで、以下、使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインファイル「arttextlight.js」をhead内に読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="arttextlight.js"></script>

エフェクトを加えたい要素を指定します。

<script type="text/javascript">
$(function() {
    $('#text').artTextLight();
});
</script>

とても簡単ですね。オプションを指定する場合は以下のように記述します。

<script type="text/javascript">
$(function() {
    $('#text').artTextLight({
        letterHighlighSpeed: 30,
        removeHighlighSpeed: 100,
        highlightInterval: 3000,
        css1: {'color': '#ccc', 'text-shadow': '1px 1px 3px #fff'},
        css2: {'color': '#333', 'text-shadow': 'none'}
    });
});
</script>

オプション

オプションでは、移動する光の速さや間隔、光の色などを指定することができます。

・letterHighlighSpeed
光が移動する速さを指定します。
・removeHighlighSpeed
移動する光の幅です。
・highlightInterval
左から右へ、繰り返し移動する光の時間の間隔です。

css1に関しては、光の色を設定できます。css2は、移動した後のテキストの色を設定します。

ということで、テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery plugin」の使い方についてでした。

以下からダウンロードできます。

Responsive Design Bookmarkletレスポンシブなデザインを瞬時に確認する為のブックマークレット「Responsive Design Bookmarklet」前のページ

Media Queriesの@mediaを使ってブラウザ幅やデバイス幅に応じたCSSを記述してみる次のページMedia Queriesの@media

関連記事

  1. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  2. jQuery.GI.TheWall.js
  3. FocusPoint

    JavaScript

    画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」

    FocusPointというjQueryプラグインを使えば、画像の指定し…

  4. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  5. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  6. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP