http://jquery.com/
http://plugins.jquery.com/project/color
http://semooh.jp/jquery/api/effects/animate/params,+%5Bduration%5D,+%5Beasing%5D,+%5Bcallback%5D/
アニメーションのサンプルです。
クリックするとスタートします。
もう一度クリックするとストップします。
色を変化させるには追加のプラグインが必要です。もしくは手動です。
たまにブラウザ(firefox7で確認)によっては落ちます。ご注意下さい。
ⅠⅡⅢⅣⅤ
ⅥⅦⅧⅨⅩ
①②③④⑤
⑥⑦⑧⑨⑩
⑪⑫⑬⑭⑮
⑯⑰⑱⑲⑳
０１２３４
５６７８９
ⅥⅦⅧⅨⅩ
①②③④⑤
⑥⑦⑧⑨⑩
⑪⑫⑬⑭⑮
⑯⑰⑱⑲⑳
０１２３４
５６７８９
ソース。
<style type="text/css">
<!--
#wordTestTwitch002, #wordTestTwitch002 *, #wordTestTwitch002Result {
border: 0px solid #676767;
border-width: 0px;
color: #181818;
font-family: "ＭＳ ゴシック","Osaka-mono",monospace;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0px;
line-height: 17px;
margin: 0px;
padding: 0px;
text-align: left;
text-decoration: none;
text-indent: 0px;
text-transform: none;
vertical-align: baseline;
white-space: normal;
word-spacing: 0px;
word-wrap: normal;
}
#wordTestTwitch002, #wordTestTwitch002 * {
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
#wordTestTwitch002 {
background-color: #FFFFFF;
border-width: 1px;
cursor: pointer;
height: 136px;
overflow: hidden;
padding: 100px 150px;
position: absolute;
vertical-align: middle;
white-space: nowrap;
width: 80px;
z-index: 2;
}
#wordTestTwitch002Result {
background-color: #FFFFFF;
border-width: 1px;
height: 8em;
margin: 352px 0 0 0;
overflow: auto;
padding: 8px 0 8px 8px;
width: auto;
}
-->
</style>
<div id="wordTestTwitch002">
ⅠⅡⅢⅣⅤ<br/>
ⅥⅦⅧⅨⅩ<br/>
①②③④⑤<br/>
⑥⑦⑧⑨⑩<br/>
⑪⑫⑬⑭⑮<br/>
⑯⑰⑱⑲⑳<br/>
０１２３４<br/>
５６７８９<br/>
</div>
<div style="clear:both; display:block; font-size: 1px; height: 1px; line-height: 1px;"></div>
<div id="wordTestTwitch002Result"></div>
<script type="text/javascript">
//<![CDATA[<!--
try{(function(){
var divElem = document.getElementById("wordTestTwitch002"),
resultElem = document.getElementById("wordTestTwitch002Result"),
divElemOuterWidth = $(divElem).outerWidth(),
divElemOuterHeight = $(divElem).outerHeight(),
orderCount = 0,
processCount = 0,
loopCount = 8,
maxFontSize = Math.min($(divElem).width(), $(divElem).height()) / 2,
accelDiameter = 50,
animateDuration = 500,
loopSleep = 1000,
animateWait = 50,
startTime = null,
checkStop = function(){
processCount--;
if (processCount <= 0)
{
$(divElem).unbind("click").css("cursor", "default");
}
},
wordTestTwitch002FuncTimeOverList = [],
resultElemScrollCount = 0,
resultElemScroll = function(){
resultElemScrollCount++;
},
resultElemScrollProcess = function(){
var i;
if (resultElemScrollCount == -100)
{
$(resultElem).animate(
{scrollTop:0},
{"duration": 8000,
"complete": function(){$(resultElem).css("background-color", "#BCDEFF");
$(divElem).css("background-color", "#BCDEFF");}});
}
else if (resultElemScrollCount <= 0)
{
if (processCount <= 0)
{
for (i = 0; i < wordTestTwitch002FuncTimeOverList.length; i++)
{
$(resultElem).append("移動回数オーバー: " + wordTestTwitch002FuncTimeOverList[i] + "<" + "br/>");
}
$(resultElem).animate({scrollTop:65535},"fast");
resultElemScrollCount = -100;
setTimeout(resultElemScrollProcess, 2000);
}
else
{
setTimeout(resultElemScrollProcess, 2000);
}
}
else
{
resultElemScrollCount--;
$(resultElem).animate({scrollTop:65535},"fast");
setTimeout(resultElemScrollProcess, 500);
}
},
resultElemScrollProcessStart = function(){
$(divElem).unbind("click", resultElemScrollProcessStart);
resultElemScrollProcess();
},
randFunc = function(division){
return ((Math.random() * 2) - 1) * division;
};
$(divElem).each(function(){
$(this).html($(this).html().replace(/((?:<[^<>]+>)*)([^<])((?:<[^<>]+>)*)/g, function(){
if (arguments[2].match(/^[\x00-\x20]$/))
{
return arguments[1] + arguments[2] + arguments[3];
}
return arguments[1]
+ "<" + "span class='wordTestTwitch002Class'>" + arguments[2] + "<" + "/span>"
+ arguments[3];
}));
}).find(".wordTestTwitch002Class").each(function(){
$(this)
.css("position", "relative")
.css("z-index", "1")
.bind("selectstart",function(){
return false;
}).mousedown(function(){
return false;
});
var cnt = 0,
elem = $(this),
top = 0,
left = 0,
fontSize = parseFloat(elem.css("font-size")),
stopFlag = false,
animateFlag = false,
setTransparent = function(){
elem
.css("color", "#FFFFFF").css("z-index", "0")
.css("filter", "alpha(opacity=0)")
.css("-ms-filter", "alpha(opacity=0)")
.css("opacity", "0")
;
},
elemRemove = function(){
if (processCount <= 0)
{
elem.remove();
}
else
{
setTimeout(elemRemove, 8000);
}
},
wordTestTwitch002FuncStop = function(){
setTransparent();
checkStop();
if (processCount <= 0)
{
$(resultElem).append("ストップ<" + "br/>").css("background-color", "#FFEDCB");
}
elemRemove();
},
wordTestTwitch002FuncTimeOver = function(){
setTransparent();
wordTestTwitch002FuncTimeOverList.push(elem.text());
checkStop();
resultElemScroll();
elemRemove();
},
wordTestTwitch002FuncArrival = function(){
setTransparent();
orderCount++;
$(resultElem).append(
(" " + orderCount).slice(-2).replace(" ", " ") + "位: " + elem.text()
+ " (font-size:"
+ (" " + Math.round(fontSize)).slice(-3).replace(" ", " ") + "px"
+ " time:"
+ String(((new Date().getTime()) - startTime) / 1000).replace(/^([0-9]+)(?:\.([0-9]+))?$/,function(){
var ret = "", decimal = arguments[2];
if (parseInt(arguments[1], 10) >= 1000)
{
ret += arguments[1];
}
else
{
ret += (" " + arguments[1]).slice(-3).replace(" ", " ");
}
if (typeof decimal !== "string")
{
decimal = "";
}
return ret + "." + (decimal + "00").substr(0, 2);
})
+ "秒"
+ ")<" + "br/>"
);
checkStop();
resultElemScroll();
elemRemove();
},
wordTestTwitch002FuncExecute = function(){
var accel, fontSizeOld,
randSleep = function(){
return Math.round(Math.random() * (animateDuration + loopSleep) / 0.25);
};
if (animateFlag === false)
{
if (stopFlag)
{
wordTestTwitch002FuncStop();
return;
}
if (++cnt > loopCount)
{
wordTestTwitch002FuncTimeOver();
return;
}
accel = Math.pow(accelDiameter * cnt / loopCount, 2) / accelDiameter;
if (fontSize < 5)
{
accel *= (6 - fontSize);
}
else if ((maxFontSize - fontSize) < 5)
{
accel /= (6 - (maxFontSize - fontSize));
}
fontSizeOld = fontSize;
fontSize += randFunc(1 + accel + ((maxFontSize <= fontSize) ? (maxFontSize * 3) : 0));
fontSize = Math.max(1, Math.min(maxFontSize, fontSize));
top += randFunc(1 + accel) + ((fontSizeOld - fontSize) / 0.125);
left += randFunc(1 + (accel * 8)) + ((fontSizeOld - fontSize) / 2);
animateFlag = true;
elem.animate({"top": Math.round(top) + "px",
"left": Math.round(left) + "px",
"font-size": Math.round(fontSize) + "px",
"line-height": Math.round(fontSize) + "px"}
,{"duration": animateDuration + randSleep(),
"complete": function(){animateFlag = false;}});
if ((divElemOuterWidth < elem.position().left)
|| (0 > (elem.position().left + elem.outerWidth()))
|| (divElemOuterHeight < elem.position().top)
|| (0 > (elem.position().top + elem.outerHeight())))
{
wordTestTwitch002FuncArrival();
return;
}
setTimeout(wordTestTwitch002FuncExecute, loopSleep + randSleep());
}
else
{
setTimeout(wordTestTwitch002FuncExecute, animateWait);
}
},
startFunc = function(){
$(divElem).unbind("click", startFunc);
setTimeout(wordTestTwitch002FuncExecute, Math.round(Math.random() * 8000));
$(divElem).click(stopFunc);
if (startTime === null)
{
startTime = new Date().getTime();
}
},
stopFunc = function(){
$(divElem).unbind("click", stopFunc);
stopFlag = true;
};
$(divElem).click(startFunc);
processCount++;
});
$(divElem)
.bind("selectstart",function(){
return false;
}).mousedown(function(){
return false;
})
.click(resultElemScrollProcessStart);
})();}catch(e){window.document.write("<"+"pre>Error: " + e + "<"+"/pre>");}
//-->]]>
</script>
0 件のコメント:
コメントを投稿