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. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

  2. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  3. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  4. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  5. jQuery cardslider

    JavaScript

    カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」

    jQuery cardsliderは、コンテンツをカードのように表示し…

コメント

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

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

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP