まだデータがありません。
テキストを使ったアニメ効果付きのプログレスバー「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
スポンサーリンク