JavaScriptで背景や文字色を色→色へ自動で変える方法

JavaScriptで背景や文字色を色→色へ自動で変える方法


例えば、赤から青へ、青になったらまた赤に色が徐々に変わり、自動的にループしてくれるようなものを探しています。

検索したところcolortweenというjsを発見したのですが、どうやって使えばいいのかわかりません。


ご回答よろしくお願い致します。

No.2 ベストアンサー 回答者： my-- 回答日時： 2010/07/11 23:28

<div id="square22" style="width:50px;height:50px;background-color:#FF0000;">

<input type="button" value="stop" onclick="colorTween.stop();">
</div>

<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="ColorTween.js"></script>
<script type="text/javascript">
var object = document.getElementById('square22').style;
var property = 'backgroundColor';
var easing = Tween.regularEaseIn;
var startColor = 'FF0000';
var endColor = '0000FF';
var duration = 5;

var colorTween = new ColorTween(object, property, easing, startColor, endColor, duration);
colorTween.onMotionFinished = colorTween.yoyo;
colorTween.start();
</script>


JAVASCRIPT MOTION TWEEN
http://jstween.blogspot.com/
Tween.js ColorTween.jsファイル配布元。
英語だけどサンプルは豊富だし、なんとかなるんじゃないだろか。

JavaScript/Library/Effects/JSTween - アークウェブシステム開発SandBox
http://www.ark-web.jp/sandbox/wiki/278.html
メソッドなどの解説。
日本語だけど、ある程度の知識を有する者を対象に書かれてます。（社内向けかも）


ちなみに、かなりCPUを喰いますね。私の環境でループ処理するときつい。

No.1 回答者： noname#140925 回答日時： 2010/07/11 15:30

JavaScriptの基礎知識くらいは習得済みなのでしょうか？

無知な人間が中身見たって理解できないと思いますので、先ずは基礎くらい身につけましょう。

[参考]とほほのJavaScriptリファレンス
http://www.tohoho-web.com/js/index.htm

この回答への補足

基礎もまだ習得できてはいませんが勉強中です。

lightboxのようにリンク貼れば簡単に使えるのかと思っていましたが、colortweenはそうはいかないみたいですね。

色が変わる効果を使ってwebページを明日までに作りたかったのでこちらで質問したのですが、。


urlありがとうございます。
勉強します

補足日時：2010/07/11 16:02