サイトの背景色をグラデーションの様に変化させる方法
- WEBサイトの背景色を時間経過とともに、グラデーションの様に色を変えて行く方法はありますか？
- GIFアニメにすると、上下のグラデーションが綺麗に表示されませんし、滑らかな色変化をさせようとすると、レイヤー数が膨大になってしまいます。また、上下で色が違うのでタイル状に表示させると、デザインの意図に沿いません。
- javascriptで色変化を試しましたが、少し意図と違いました。
- ベストアンサー
サイトの背景色をグラデーションの様に変化させる方法
WEBサイトの背景色を時間経過とともに、 グラデーションの様に色を変えて行く方法はありますか？ 添付の画像の様に、上部分の色は変えずに、 下部分の色が滑らかに変わっていくデザインにしたいのですが、 そのような事は可能でしょうか？ GIFアニメにすると、上下のグラデーションが綺麗に表示されませんし、 滑らかな色変化をさせようとすると、 レイヤー数が膨大になってしまいます。 また、上下で色が違うのでタイル状に表示させると、 デザインの意図に沿いません。 javascriptで以下の様な色変化は見つけたのですが、 http://www14.plala.or.jp/sugachuu/JavaScript/2002/backcolorchenge.html これも少し意図と違いました。
- acef
- お礼率52% (62/117)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （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を作る方法で、残念ながら私はグラデーションを綺麗にアニメーションできるソフトは知りません。 また、試したわけではありませんので上記の方法が可能な保証はありません。
関連するQ&A
- フォトショで背景の色にグラデーションをつける方法
下の画像で、白い帯のぶぶんが、左から右に向かうにつれて じょじょに色がうすくグラデーションしています。 このようなグラデーションの背景を作るにはどうすればいいですか？
- ベストアンサー
- 画像・動画・音楽編集
- ページがグラデーションの背景になる
最近、あるページを表示しているとき、別のタブに移ってから前のタブに戻ると、前のページがグラデーションの背景だけになっていることがよくあります。 下のほうが黄緑色、上のほうが橙色でグラデーションになっている背景画像が敷き詰められているといった感じです。 そのページにあった文字などは消え、背景のみが表示されます。 更新すると元に戻るのですが、なぜこんなことが起きるのでしょうか。 なお、使っているパソコンはWindows7、東芝のdynabook R63、ブラウザはGoogle Chromeです。
- 締切済み
- Windows 7
- グラデーションツールを一つのレイヤーにのみ適用させる方法【photoshop】
はじめまして。 現在、photoshopを勉強中の者です。 illustratorで作成した、角丸長方形にグラデーションツールを適用させたいのですが、レイヤーを選択して、そのまま使うと、背景の透明部分にまでグラデーションがかかってしまい、角丸部分が消えてしまいます。 どうにかして、1レイヤーの形にだけグラデーションをかけたいのですが、どうすればいいのでしょうか？ どうかよろしくお願いいたします。
- 締切済み
- グラフィックソフト
- 画像の灰色のグラデーションを青のグラデーションに
psdファイルの灰色のグラデーションで描かれたレイヤーを青のグラデーションにしたいです。 GIMPやphotopeaをつかって色置換や色相の返還を試しているのですが、全く変化しません。どうぞよろしくお願いいたします。
- ベストアンサー
- グラフィックソフト
- 表のセルをグラデーション
JavaScriptで文字列をグラデーションは出来ますよね。 あの要領で、表のセルにグラデーションをかけることは出来ませんか? バックが左から右にだんだん薄くなるってものです。 画像を入れるってのも考えましたが、相手の環境などにより長さが変化するとデザインが崩れるのがちょっといやで… フレキシブルにするためにはセル自体に色をつけるしか方法がないと思うのですが… 回答ズバリを書き込んでいただいてもありがたいのですが、方法が載っているサイトでもかまいません。 あったら教えてください。 お願いします。
- 締切済み
- JavaScript
- ドットのグラデーションの作り方を教えてください。
ドットのグラデーションの作り方を教えてください。 グラフィックの背景やロゴなどで、色付きのドットが小さいのから大きいのに変化して最後がその色のベタ塗りになるグラデーションのパターンをよく見るのですが、どうやって作っているんでしょうか？ イラレかフォトショだと思うんですが、教えていただけると助かります。
- ベストアンサー
- デザイナー・クリエイティブ職
- サイトのデザインを「スクラッチ技法（文字や罫線の隙間からだけ、その下の色が見える）」にしたい。
サイトのデザインを「スクラッチ技法（文字や罫線の隙間からだけ、その下の色が見える）」にしたいのですが、ご指導ください。 なお、作りたいのは、http://www.re-wish.com/sample.gifのようなものです。 背景は黒、テキストや罫線の部分(テキスト背景ではなく、文字の太さ)にだけグラデーションを表示させたいと考えています。グラデーションはページ全体で変化させたいです。 黒い紙を文字の形に穴を開け、その穴からグラデーションが見える、そんな風にしたいのですが、cssでどのようにしたらいいでしょうか？ http://www.moongift.jp/2008/01/css_gradient_text_effect/を参考にはしたのですが、どうもしたいことと少し違うように思いました。 今、制作段階のものは、Photoshop CS3のレイヤーでとらえますと、 1.模様 2.テキスト 3.背景色 という重なりで、「1.模様」で「2.テキスト」をクリッピングマスクしています。 ソフトはIllustrator、Photoshop、DreamweaverのそれぞれCS3を使用しています。よろしくお願いいたします。 最終的にはDreamweaver CS3でのサイト制作を予定しています。 何卒よろしくお願いします。
- ベストアンサー
- デザイナー・クリエイティブ職
- photoshop elements 7で合成の際、背景からレイヤーに
photoshop elements 7で合成の際、背景からレイヤーに徐々に透明になっていく(グラデーション)ようにする方法を教えてください。 つまりレイヤーの輪郭を透明のグラデーション状にする方法です。 色⇒透明にグラデーションする方法はグラデーションツールにあるので分かるのですが、 レイヤー⇒透明にグラデーションを作る方法が分かりません。
- ベストアンサー
- 画像・動画・音楽編集
- 「ページの色」のグラデーションで教えてください
ワード2007です。ページにグラデーションの色をつけるとき、ページの上下に図形の長方形を書き、枠線を消し、 それぞれの塗りつぶしを、上下対称にグラデーションで色を付けることによって、「ページの上下だけが濃く真ん中の方は白い」グラデーションにしてきました。 今回、「ページの色」からやってみたのですが、上記のようにならず困っています。 「ページレイアウト」→「ページの色」→「塗りつぶし効果」 表示されたダイアログで「グラデーション」→色「1色」にチェックし、色を選択。 暗・明をドラッグして1番右の「明」に設定。 グラデーションの種類「横」にチェック→バリエーションの中から左下の「上下が濃く真ん中は白い」のを選択→「OK」 以上のように設定すると、ページの中でいくつものグラデーションが繰り返され、濃い薄い濃い薄い・・と縞模様になってしまいます。 またこれは、ワードの画面上やプレビューでは、上下だけが濃いグラデーションのように見えるのですが、印刷すると縞模様です。 始めに書きましたグラデーションにするには、「ページの色」ではどう設定したらよいのでしょうか？ どうぞ教えて下さい。よろしくお願いいたします。
- ベストアンサー
- Windows Vista
- フラッシュを使っているかのように文字色が変化するやり方
フラッシュは使っていないと思うのですが、あるところで目にしたのですが文字にカーソルを乗せると、次々に色が変化してグラデーションのようになります。 このやり方を、教えていただきたいのです。 （具体的なＨＴＭＬやＪａＶａＳｃｒｉｐｔのプログラミングを記載してくださると助かります） それから、ＨＴＭＬのどこの部分に設置したらいいのかも教えてくださるとありがたいです。 今のところ考えているのは、ＢＬＯＧのような記事の本文の一部にこのグラデーションを入れてほかは規定の色で・・・と考えていますができるのでしょうか。 詳しくないので理解できないかもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
詳しくありがとうございます。 やはりブラウザによる表示の違いがネックですね。 私のやろうとしてる事はかなり高度な事みたいですので、 javascriptをほとんど理解していない人が使うには危険（？）かもしれません。 プログラムまで書いて頂き、ありがとうございました。