● 内容
① テキストをアニメーションします。
② 下記からスクリプトをダウンロードできます。
http://kiro.me/projects/textualizer.html
③ 例は、私のヘッダー画像の右下を参照してください。
④ ブラウザ別のテスト結果
| ブラウザ名 | バージョン | テスト結果 | 備考 |
| Firefox | 最新版 | ○ | |
| IE | 7 | ○ | |
| IE | 8 | ○ | |
| IE | 9 | ○ | |
| IE | 10 | ○ | |
| Google Chrome | 最新版 | ○ | |
| Opera | 最新版 | ○ | |
| safari | 最新版 | ○ | |
| Sleipnir | 最新版(IE10) | ○ |
凡例： ○・・・動く ×・・・動かない
● 設置方法
① http://kiro.me/projects/textualizer.html のDownloadの
下の textualizer.js - (12.67 kb) development をクリック
します。
② スクリプトが表示されるので、それを全部コピーして
自分のＰＣのファイルにコピーします。
テキストファイルにコピーして拡張子を js と変えると
いいと思います。（拡張子を表示するようにしてから）
・ 上記の内容をコピーしてメモ帳に貼りつける。
・ 貼り付けたら、ファイル→名前を付けて保存をクリックする。
・ textualizer.js という名前にして保存する。
・ あとは、このファイルをDropboxなどの自分が利用している場所にアップロードする。
③ スクリプトファイルをアメブロが読める場所にアップロードします。
私は、Dropboxへアップロードしました。
④ フリープラグインへ下記を追加する（例）
★はアップロード先のＵＲＬ。表示したい文章は追加できます。
赤字部分は変更可能部分。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script src="★/textualizer.js"></script>
<script type="text/javascript">
$(function(){
var list = ["表示したい文章①",
"表示したい文章②",
"表示したい文章③"
];
var bgt = $('#blog_title_1');
bgt.textualizer(list);
bgt.textualizer('start');
});
</script>
・私のブログの設置例
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script src="https://dl.dropboxusercontent.com/u/192658020/textualizer/textualizer.js"></script>
<script type="text/javascript">
$(function(){
var list = ["リアナのカスタマイズ日記",
"Liana's Customize Diary",
"http://ameblo.jp/new-blue-777/"
];
var bgt = $('#blog_title_1');
bgt.textualizer(list);
bgt.textualizer('start');
});
</script>
・ 形式・・・下記の様に option が指定できます。
<script type="text/javascript">
var list = ['表示したい文章①', '表示したい文章②', '表示したい文章③'];
var txt = $('セレクター名');
var options = {
duration: 1000, // 文章の表示時間(ミリ秒) 初期値=2000
rearrangeDuration: 1000, // 文章のアニメーション完了時間(ミリ秒) 初期値=1000
effect: 'random', // rabdam(初期値)
centered: true, // 文字を集中(true or false) 初期値=false
loop: true // ループ(true or false) 初期値=true
}
txt.textualizer(list, options); // 設定
txt.textualizer('start'); // 開始
</script>
⑤ 設置したい場所に下記を追加する（例）
<div id="blog_title_1"></div>
⑥ ＣＳＳの一番下へ下記を追加する（例）
/* ---------------------------------------- */
/* textualizer 設定 */
/* ---------------------------------------- */
#blog_title_1{ /* ブログタイトル */
position:absolute;/* 絶対配置 */
left:680px; /* 位置（左から) */
top:210px; /* 位置（上から） */
width:530px; /* 幅 */
font-size:28px; /* 文字の大きさ */
height:170px; /* 高さ */
color:#ff5599; /* 文字の色 */
font-weight:bold; /* 文字の太さ */
overflow:hidden; /* オバーフロー */
font-family: "メイリオ", Meiryo, Verdana, Arial, sans-serif;
display:block;
padding-top:30px; /* 上の余白 */
}