WEBサイトの背景色を時間経過とともに、
グラデーションの様に色を変えて行く方法はありますか?
添付の画像の様に、上部分の色は変えずに、
下部分の色が滑らかに変わっていくデザインにしたいのですが、
そのような事は可能でしょうか?
GIFアニメにすると、上下のグラデーションが綺麗に表示されませんし、
滑らかな色変化をさせようとすると、
レイヤー数が膨大になってしまいます。
また、上下で色が違うのでタイル状に表示させると、
デザインの意図に沿いません。
javascriptで以下の様な色変化は見つけたのですが、
http://www14.plala.or.jp/sugachuu/JavaScript/200 …
これも少し意図と違いました。
No.2ベストアンサー
- 回答日時:
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>
詳しくありがとうございます。
やはりブラウザによる表示の違いがネックですね。
私のやろうとしてる事はかなり高度な事みたいですので、
javascriptをほとんど理解していない人が使うには危険(?)かもしれません。
プログラムまで書いて頂き、ありがとうございました。
No.1
- 回答日時:
JavaScriptとアニメGIFを併用した方法が思いつきます。
横1×縦256ピクセルのアニメGIFを用意して、JavaScriptでブラウザの画面に合わせたサイズに拡大します。
背景画像では拡縮できないのでimgタグを使い、上に文字を重ねるのはdivのpositionとz-indexを活用すればできると思います。
ただ問題は綺麗なアニメGIFを作る方法で、残念ながら私はグラデーションを綺麗にアニメーションできるソフトは知りません。
また、試したわけではありませんので上記の方法が可能な保証はありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Illustrator(イラストレーター) ワード。オブジェクトの一部分にグラデーションを塗るには。 2 2022/10/04 13:35
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- Windows 95・98 タスクバーの背景の色だけを変えたい。 2 2022/07/13 14:44
- Android(アンドロイド) 画像に透かしのウォーターマークを追加する方法について 1 2023/06/09 16:43
- Visual Basic(VBA) マクロ実行時、自動で背景色を変えたい。 C列にあるチェックボックスをチェックするとB列に「TRUE」 4 2022/11/08 11:14
- 写真・ビデオ スマホ(シャープSENSE7-53C)の背景色を変更したい 2 2023/08/09 11:50
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Visual Basic(VBA) 昨日、質問した件『VBA にて、条件付き書式で背景色を設定しているセルの範囲で、背景色付きのセルをカ 4 2022/04/07 14:39
- Word(ワード) ワード。オブジェクトの一部分にグラデーションを塗るには 2 1 2022/10/04 16:25
- その他(Microsoft Office) マクロについて教えて下さい 3 2022/05/28 15:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
div要素を半透明にして且つ外枠...
-
ホームページビルダー14のどこ...
-
CSS 可変マージン
-
HTML CSS 文字化け
-
ロールオーバーで画像拡大、z-i...
-
メニューやヘッダー背景だけを...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
positionのrelativeとabsolute...
-
youtubeをHPに載せたいです。
-
CSS <div>の入れ子が反映さ...
-
<div valign=bottom> は効かな...
-
スタイルシートで位置固定する...
-
ホームページの位置のずれについて
-
ラジオボタンで段階評価
-
オンマウス時に別画像を上に重...
-
CSS のみのタブ切り替えについて
-
SafariでもBGMを流す方法という...
-
htmlの記述で link rel=styles...
-
MAX関数を使ってからLEFT JOIN...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
チェックボックスの背景色って...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
CSSでdivのheightを動的に
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
リキッドデザイン3カラム左端幅...
-
htmlのstyleのposition:relativ...
-
★★★フッター最下部固定/スクロ...
おすすめ情報