テキストを使ったアニメ効果付きのプログレスバー「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
スポンサーリンク