- 締切済み
背景をグラデーションにする方法
スタイルシートで指定する方法はよく見かけるのですが、ページをスクロールしていくと徐々にグラデーションになっていくようにすることは可能でしょうか？
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- pchelp-sandbox
- ベストアンサー率75% (6/8)
色と色数を任意に指定できるようにしました。 初期値だと、パステル調で赤→緑→青と変化します。 ハイフン区切りで任意個並べてください。 プログラムは計算式が多く、見た目は複雑そうですが、 やっていることは至極単純で、 まず、スクロール位置のパーセントを p に求め、後は、 色のRGB成分値をこのpに応じて計算しているだけです。 <html> <head> <script type="text/javascript"> <!-- function onscroll_body() { with (document.body) { var p = Math.floor(scrollTop / (scrollHeight - clientHeight) * 100); } var rgb = document.getElementById("txt").value.split("-"); var range = 100 / (rgb.length - 1); var idxS = Math.floor(p / range); var idxE = Math.ceil(p / range); var depth = (p - idxS * range) / range; var col = 0; for (var i = 0, m = 0x10000; i < 3; i++, m /= 0x100) { var colS = parseInt("0x" + rgb[idxS].substr(i * 2, 2)); col += Math.floor(colS * (1 - depth)) * m; var colE = parseInt("0x" + rgb[idxE].substr(i * 2, 2)); col += Math.floor(colE * depth) * m; } document.body.style.backgroundColor = col; status = "scroll% = " + p + " : color = #" + col.toString(16); } // --> </script> </head> <body onload="onscroll_body()" onscroll="onscroll_body()"> <div style="height:3000px"> scroll gradation (target=IE) <br> RGB=<input type="text" id="txt" size="80" value="FF8888-88FF88-8888FF"/> </div> </body> </html>
- pchelp-sandbox
- ベストアンサー率75% (6/8)
求めているタイプと一致しているかは分かりませんが、onscrollイベントを取って処理する方法で実現できるかもしれませんね。 およそ、こういうタイプでしょうか？ <html> <head> <script type="text/javascript"> <!-- function onscroll_body() { with (document.body) { style.backgroundColor = 0xFFFF00 + parseInt((scrollTop / scrollHeight) * 0xFF); } } // --> </script> </head> <body onload="onscroll_body()" onscroll="onscroll_body()"> 下へスクロールさせれば、黄色から白へ (target=IE) <div style="height:3000px"/> </body> </html>
- LAIT
- ベストアンサー率32% (25/78)
Javascriptですが、こんな感じですか。http://www.openspc2.org/reibun/javascript/graphic/021/code.html ソース：http://www.openspc2.org/reibun/javascript/graphic/021/index.html （IE5.5以上のみ）
お礼
こちらの方法は知っているんです、すみません。 わたしが知りたいのは背景固定ではなくてスクロールバーがある状態で、画面をスクロールするとグラデーションになっていくという方法です。 以前にそういう方法を使用しているページを見かけたのでどうやるのかと思って探しているんですが、今回教えていただいた方法しか見つけられません。 回答ありがとうございました。
お礼
回答ありがとうございます。 確かこんな感じだったと思います。 自分で少しいじってみたらエラーになってしまうんですが、色の指定はどうすればいいでしょうか？ 色は2色しか設定できないんですが2色以上設定することは可能ですか？ もしよろしければ回答お待ちしています。