- ベストアンサー
サイトの背景色をグラデーションの様に変化させる方法
- WEBサイトの背景色を時間経過とともに、グラデーションの様に色を変えて行く方法はありますか？
- GIFアニメにすると、上下のグラデーションが綺麗に表示されませんし、滑らかな色変化をさせようとすると、レイヤー数が膨大になってしまいます。また、上下で色が違うのでタイル状に表示させると、デザインの意図に沿いません。
- javascriptで色変化を試しましたが、少し意図と違いました。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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>
その他の回答 (2)
- SortaNerd_
- ベストアンサー率59% (309/522)
たびたびすいません。先ほどのものだとスクロールに追随してくれません。 直す方法はあるとは思いますが、よく分かりません。
- SortaNerd_
- ベストアンサー率59% (309/522)
JavaScriptとアニメGIFを併用した方法が思いつきます。 横1×縦256ピクセルのアニメGIFを用意して、JavaScriptでブラウザの画面に合わせたサイズに拡大します。 背景画像では拡縮できないのでimgタグを使い、上に文字を重ねるのはdivのpositionとz-indexを活用すればできると思います。 ただ問題は綺麗なアニメGIFを作る方法で、残念ながら私はグラデーションを綺麗にアニメーションできるソフトは知りません。 また、試したわけではありませんので上記の方法が可能な保証はありません。
お礼
詳しくありがとうございます。 やはりブラウザによる表示の違いがネックですね。 私のやろうとしてる事はかなり高度な事みたいですので、 javascriptをほとんど理解していない人が使うには危険（？）かもしれません。 プログラムまで書いて頂き、ありがとうございました。