Textualizer

JavaScript

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

フェードやスライドといった様々なエフェクトをテキストに与えながら切り替わっていくjQueryプラグイン「Textualizer」を使ってみました。とても滑らかで動きがおもしろいので、テキストに集中しちゃいますね。注目させたいテキストなどがあれば効果的かと思います。以下、使い方です。

[ads_center]

使い方

head内にjQueryとダウンロードしたプラグインを読み込みます。

<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="textualizer.js"></script>

次に、オプションや目的のテキストを記述していき、Textualizerをセットしていきます。

<script type="text/javascript">
$(function() {
    var list = ['サンプル01', 'サンプル02', 'サンプル03']; // 目的のテキストを指定
    var txt = $('#sample'); // id名を指定
    var options = {
        duration: 1000,
        rearrangeDuration: 1000,
        effect: 'random',
        centered: true
    }

    txt.textualizer(list, options);
    txt.textualizer('start');
});
</script>

そして、指定したid名を表示させたい場所に記述していきます。

<!-- Textualizerを表示 -->
<div id="sample"></div>

ちなみに、指定したidにはwidthとheightを設定しないと動かなかったので、CSSで設定しておくといいかと思います。

ということで、Textualizerの使い方についてでした。

ダウンロードは以下からどうぞ。

Screen Capture (by Google)Chromeでサイト全体のスクリーンショットなども撮って編集もできる拡張機能「Screen Capture (by Google)」前のページ

Macのマウス操作でコピペがかなり捗るアプリ「PopClip」次のページPopClip

関連記事

  1. mmenu

    JavaScript

    スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」

    mmenuというjQueryプラグインを使えば、スマホアプリのように横…

  2. Before and After image script
  3. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  4. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

コメント

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

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

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP