● 内容
① テキストを炎の様に燃え上がらせるアニメーションです。
Burn は燃える、焼けるの意味です。
② 下記からスクリプトをダウンロードできます。
http://sinetheta.github.io/burn/
③ 例は私のヘッダー画像のの右下の文字を参照してください。
注意：textualizer(テキストのアニメーション エフェクト) と両方を適用しています。
④ ブラウザ別のテスト結果
| ブラウザ名 | バージョン | テスト結果 | 備考 |
| Firefox | 最新版 | ○ | |
| IE | 7 | × | |
| IE | 8 | × | |
| IE | 9 | × | |
| IE | 10 | ○ | |
| Google Chrome | 最新版 | ○ | |
| Opera | 最新版 | ○ | |
| safari | 最新版 | ○ | |
| Sleipnir | 最新版(IE10) | ○ |
凡例： ○・・・動く ×・・・動かない
⑤ この記事では簡単なアニメーションを紹介します。
● 設置方法
① 下記からダウンロードを行います。
http://sinetheta.github.io/burn/
・ Download Plugin をクリックします。
② スクリプトが表示されるので、それを全部コピーして
自分のＰＣのファイルにコピーします。
テキストファイルにコピーして拡張子を js と変えると
いいと思います。（拡張子を表示するようにしてから）
・ 上記の内容をコピーしてメモ帳に貼りつける。
・ 貼り付けたら、ファイル→名前を付けて保存をクリックする。
・ jquery.burn.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="★/jquery.burn.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if(navigator.userAgent.indexOf("MSIE") == -1){
$('#blog_title_1').burn();
}
});
</script>
・私のブログの設置例
注意：textualizer(テキストのアニメーション エフェクト) と両方を適用しています。
<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/burn/js/jquery.burn.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if(navigator.userAgent.indexOf("MSIE") == -1){
$('#blog_title_1').burn();
}
});
</script>
⑤ 設置したい場所に下記を追加する（例）
<div id="blog_title_1"></div>
⑥ ＣＳＳの一番下へ下記を追加する（例）
/* ----------------------------------------- */
/* Burn 設定 */
/* ----------------------------------------- */
#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; /* 上の余白 */
}