[jQuery]テキストを効果的に表示するTextualizer

Read More

jQueryプラグインのTextualizerを使えばただのテキストを効果的に表示することができる。


こんなかんじ



Textualizerは以下のリンク先からダウンロードすることができる。

■Textualizer | K. Risk - JavaScript Refined
http://kiro.me/projects/textualizer.html


使い方も上記と同じページに載っている。
写真のあんちゃんが作ったんだね。



■動作サンプルはこちら↓
http://xirasaya.com/demo/9/



■試してみたスクリプト
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/textualizer.js"></script>
<script type="text/javascript">
<!--
$(window).load(function(){
  var list = [
    '帝国ホテル', 
    '帝国ホテルは、', 
    '帝国ホテルは、創業の精神を継ぐ',
    '創業の精神を継ぐ', 
    '創業の精神を継ぐ日本の代表ホテルであり、',
    '国際的ベストホテルを', 
    '国際的ベストホテルを目指す企業として、',
    '最も優れたサービスと', 
    '最も優れたサービスと商品を提供することにより、',
    '国際社会の発展と、',
    '国際社会の発展と、人々の豊かでゆとりある生活と', 
    'ゆとりある生活と文化の向上に貢献する。',
    '文化の向上に貢献する。',
    '帝国ホテル'
  ];  // list of blurbs
  
  var txt = $('#txtlzr');  // The container in which to render the list
  
  var options = {
    duration: 1000,      // Time (ms) each blurb will remain on screen
    rearrangeDuration: 1000,  // Time (ms) a character takes to reach its position
    effect: 'slideTop',    // Animation effect the characters use to appear
    centered: true      // Centers the text relative to its container
  }
  
  txt.textualizer(list, options); // textualize it!
  txt.textualizer('start'); // start
  txt.on('textualizer.changed', function(event, args) {
    // check if it's the last index in the array
    if (args.index === list.length-1) {
      txt.textualizer('pause');
      delete list;
      delete options;
    }
  });

});
//-->
</script>
</head>
<body>
<div id="txtlzr"></div>
</body>
</html>





あはは、おもしろいなーこれ。


上記の試してみたスクリプトでは、同じような表示文字列を何度か重ねて配列で指定しているのは、動かしてみてその方が雰囲気でるなーって思ったから。


日本語と英語の違いというか、英語だとはほぼ必ず母音が出る。
日本語は必ずしもそうはならないので何かしらの工夫が必要って思った。


このTextualizer、企業理念とか経営理念とかそーいうのをサイトの頭にもってくるような、いわゆるちょっとお堅い企業系のサイトにあう感じ。


スクリプトが終わったタイミングは取得できるので、テキストが終わったあとに一枚の画像をどーんと表示させるとか、別のdivを読み込んでくるとかすればできることが色々増えそう。


まーデモではそこまではめんどうなのでやらんかった。




あ、ちなみに当サイトと帝国ホテルはまったく何の関係もありません。

ただそういう雰囲気のあるサイトを作るときに使えるよねーってイメージをつかむために文言を拝借して使っただけ。

文章変えろやって指摘がきたら変えます。たぶん





--
あとこれ、複数のブラウザに対応しているってのも見逃せない点。

公式には以下のもので動作テストしてるって書いてあった。

Chrome
Safari 4+
Firefox 3.5+
IE 6,7,8,9+
Opera 10.6+
Mobile Safari (iOS 4+)



ま、XPのサポも終わったしIE6で動かなきゃいけないっていう必要もないんだけど。

というかむしろ対応してますってうたっちゃう会社があったらそっちの方が問題