まだデータがありません。
テキストを使ったアニメ効果付きのプログレスバー「Nyan Bars」
当ページのリンクには広告が含まれています。
スポンサーリンク
テキストを使ったアニメ効果付きのプログレスバーを作成するプラグイン「Nyan Bars」を紹介します。
jQueryプラグイン「Nyan Bars」
このプラグインを使えば、アニメーション表示のプログレスバーを作成することができます。しかも、プログレスバーがテキストなので記号や顔文字、アスキーアートと使ったバーを作成することができます。
一風変わったプログレスバーなので、サイトに面白い効果を加えることができますね。
スポンサーリンク
デモのプログレスバーをご覧ください。
ソース(HTML + jQuery)
<!DOCTYPE html> |
< html > |
< head > |
< meta charset = "utf-8" > |
< meta name = "description" content = "relocatorのデモでーす。" > |
< title >Nyan Bars - jQueryプラグイン</ title > |
< style > |
[id*=bar] { |
font-family: Courier; |
margin-bottom: 20px; |
} |
</ style > |
</ head > |
< body > |
< h1 >Nyan Bars のデモでーす。</ h1 > |
< div id = "bar1" ></ div > |
< div id = "bar2" ></ div > |
< div id = "bar3" ></ div > |
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></ script > |
< script src = "jquery.nyanbars.js" ></ script > |
< script > |
$(document).ready(function(){ |
$("#bar1").nyanBar({ |
charSize: 60, // How many character to take up. |
pattern: "-*>", // The pattern to parse. |
showProgress: true, // Whether to show a percentage. |
progressFunction: (function() { |
var ctr = 0; |
return function() { |
ctr = (ctr + 2) % 100; |
return ctr; |
} |
})() |
}); |
$("#bar2").nyanBar({ |
charSize: 60, |
patterns: [ |
"=(^-^)=", |
"{_|\\\\}(u_u)" |
], |
showProgress: true, |
progressFunction: (function() { |
var ctr = 0; |
return function() { |
ctr = (ctr + 2) % 100; |
return ctr; |
} |
})() |
}); |
|
$("#bar3").nyanBar({ |
charSize: 60, |
patterns: [ |
"{-|_}*,------, ", |
"{_|-}*| /\\\\_/\\\\", |
"{-|_}*|__( ^ .^)", |
"{_|-}* {{\"| }}\"{{ |\"}} {{\"| }}\"{{ |\"}} " |
], |
showProgress: true, |
progressFunction: (function() { |
var ctr = 0; |
return function() { |
ctr = (ctr + 2) % 100; |
return ctr; |
} |
})() |
}); |
}); |
</ script > |
</ body > |
</ html > |
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Nyan Bars
スポンサーリンク