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

質問

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

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

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

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

回答No.2

my-- · ベストアンサー

<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

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

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

補足

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

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

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

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