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の使い方でした。以下からダウンロードできます。

関連記事

  1. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  2. Effect Ideas for Card Stacks
  3. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  4. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  5. bcralnit.js
  6. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

コメント

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

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

最近の記事

  1. 渋谷スクランブルスクエアからの夜景
  2. BELTZのバスクチーズケーキ
  3. iPhone 11 Pro Smart Battery Case ホワイト
  4. 渋谷スクランブル交差点

アーカイブ

PAGE TOP