Textillate.js

JavaScript

テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillate.js」

指定したテキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillate.js」を使ってみました。とても興味深い動きをするので見ていて楽しいですね。エフェクトの種類やループ、Delayなどオプションも色々あるので自分好みのエフェクトにカスタマイズできそうです。

[ads_center]

使い方

基本的にはダウンロードしたプラグインの中から、Textillate.jsの他にも、jquery.lettering.jsとanimate.cssを読み込む必要があります。

<link href="animate.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>

あとはアニメーションを加えたい要素をセットするだけです。

<script>
$(function () {
    $('.sample').textillate();
})
</script>

以下はHTML。

<p class="sample">ここはサンプルです</p>

オプションを指定する場合は以下のように記述します。

<script>
$(function () {
    $('.sample').textillate({
        loop: false, // ループ
        minDisplayTime: 1000,
        initialDelay: 0,
        autoStart: true, // 自動スタート
        in: { 
            effect: 'rollIn',
            delayScale: 1.5,
            delay: 100,
            sync: false, // 動作の同期
            shuffle: true // シャッフル
        },
        out: {
            effect: 'hinge',
            delayScale: 1.5,
            delay: 100,
            sync: false,
            shuffle: false,
        }
    });
})
</script>

他にも色々とオプションがあるので詳しくは公式サイトをご確認ください。テキストに注目を集めたい場合なんかに有効ですね。

ということで、以上、Textillate.jsの使い方でした。以下からダウンロードできます。

Google英語版でWeb検索Googleの英語版でWeb検索して検索結果を表示させるやり方前のページ

G-SHOCKの原点が受け継がれるファーストモデル直系の「GW-S5600-1JF」購入レビュー次のページGW-S5600-1JF

関連記事

  1. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  2. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  3. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  4. nanoGALLERY
  5. Responsive Multi Menu

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP