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」の使い方についてでした。

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

関連記事

  1. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  2. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  3. Multi-Step-Form-Js
  4. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  5. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  6. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP