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. jfMagnify
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  3. Responsive Parallax Drag-slider With Transparent Letters
  4. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

  5. Slight Submenu
  6. Before and After image script

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP