サイトの背景色をグラデーションの様に変化させる方法

解決済

質問者：acef
質問日時：2009/08/29 19:57
回答数：3件

WEBサイトの背景色を時間経過とともに、
グラデーションの様に色を変えて行く方法はありますか？

添付の画像の様に、上部分の色は変えずに、
下部分の色が滑らかに変わっていくデザインにしたいのですが、
そのような事は可能でしょうか？

GIFアニメにすると、上下のグラデーションが綺麗に表示されませんし、
滑らかな色変化をさせようとすると、
レイヤー数が膨大になってしまいます。
また、上下で色が違うのでタイル状に表示させると、
デザインの意図に沿いません。

javascriptで以下の様な色変化は見つけたのですが、
http://www14.plala.or.jp/sugachuu/JavaScript/200 …
これも少し意図と違いました。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： SortaNerd_
回答日時：2009/08/31 01:29

No1です。

JavaScriptだけで作る方法を思いつきました。
高さ1pxのdivを並べて色をJavaScriptで制御すればできそうです。
しかし試しに作ってみたところ、Firefoxでは動くもののIEでは表示が乱れてしまいました。
作ったものを書いておきますので参考にしてください。

<html>
<head>
<meta charset="Shift_JIS">
</head>
<body onload="exe()">
<div>
<h1>ページ内容</h1>
あいうえお<br>
かきくけこ
</div>
<span id="layer">
</span>
<script language="JavaScript">
topcolor=new Array(256,128,192);
bottomcolors=[];
bottomcolors[0]=new Array(128,128,256);//グラデーションに使う色を順番に
bottomcolors[1]=new Array(256,128,256);
bottomcolors[2]=new Array(256,128,128);
bottomcolors[3]=new Array(256,256,128);
bottomcolors[4]=new Array(128,256,128);
bottomcolors[5]=new Array(128,128,256);
changetime=20;//次の色に変化するまでの段階数
interval=200;//色が1段階変化するのにかかる時間(ミリ秒)
roundtime=changetime*bottomcolors.length;
bottomcolor=new Array(0,0,0);
time=0;
function exe(){
if(document.all){
wd=document.body.clientWidth;
ht=document.body.clientHeight;
}
else{
wd=innerWidth;
ht=innerHeight;
}
temp="";
time++;
if(time>=roundtime)
time-=roundtime;
pos0=Math.floor(time/changetime);
pos1=pos0+1;
if(pos1>=bottomcolors.length)
pos1-=bottomcolors.length;
minutepos=time%changetime;
bottomcolor[0]=Math.floor((bottomcolors[pos0][0]*(changetime-minutepos)+bottomcolors[pos1][0]*minutepos)/changetime);
bottomcolor[1]=Math.floor((bottomcolors[pos0][1]*(changetime-minutepos)+bottomcolors[pos1][1]*minutepos)/changetime);
bottomcolor[2]=Math.floor((bottomcolors[pos0][2]*(changetime-minutepos)+bottomcolors[pos1][2]*minutepos)/changetime);
for(i=0;i<ht;i++){
temp+="<div style=\"position:absolute; width:"+wd+"px; height:1px;z-index:-1; left:0px; top:"+i+"px; background-color:rgb("+Math.floor((topcolor[0]*(ht-i)+bottomcolor[0]*i)/ht)+","+Math.floor((topcolor[1]*(ht-i)+bottomcolor[1]*i)/ht)+","+Math.floor((topcolor[2]*(ht-i)+bottomcolor[2]*i)/ht)+")\"></div>";
}
document.getElementById("layer").innerHTML=temp;
setTimeout('exe()', interval)
}
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

詳しくありがとうございます。
やはりブラウザによる表示の違いがネックですね。
私のやろうとしてる事はかなり高度な事みたいですので、
javascriptをほとんど理解していない人が使うには危険（？）かもしれません。
プログラムまで書いて頂き、ありがとうございました。

通報する

お礼日時：2009/09/04 00:31

No.3

回答者： SortaNerd_
回答日時：2009/08/31 01:35

たびたびすいません。

先ほどのものだとスクロールに追随してくれません。
直す方法はあるとは思いますが、よく分かりません。

- 0
- 件

通報する

No.1

回答者： SortaNerd_
回答日時：2009/08/31 00:31

JavaScriptとアニメGIFを併用した方法が思いつきます。

横1×縦256ピクセルのアニメGIFを用意して、JavaScriptでブラウザの画面に合わせたサイズに拡大します。
背景画像では拡縮できないのでimgタグを使い、上に文字を重ねるのはdivのpositionとz-indexを活用すればできると思います。
ただ問題は綺麗なアニメGIFを作る方法で、残念ながら私はグラデーションを綺麗にアニメーションできるソフトは知りません。
また、試したわけではありませんので上記の方法が可能な保証はありません。