プロが教える店舗＆オフィスのセキュリティ対策術

背景をグラデーションにする方法

締切済

  • 質問者：hope-ya
  • 質問日時：
  • 回答数：3件

スタイルシートで指定する方法はよく見かけるのですが、ページをスクロールしていくと徐々にグラデーションになっていくようにすることは可能でしょうか？

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3

色と色数を任意に指定できるようにしました。


初期値だと、パステル調で赤→緑→青と変化します。
ハイフン区切りで任意個並べてください。

プログラムは計算式が多く、見た目は複雑そうですが、
やっていることは至極単純で、
まず、スクロール位置のパーセントを 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>
    • good
    • 0
    • 件
通報する

No.2

求めているタイプと一致しているかは分かりませんが、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
確かこんな感じだったと思います。
自分で少しいじってみたらエラーになってしまうんですが、色の指定はどうすればいいでしょうか？
色は2色しか設定できないんですが2色以上設定することは可能ですか？
もしよろしければ回答お待ちしています。

通報する
お礼日時：2006/01/13 22:11

No.1

  • 回答者： LAIT
  • 回答日時：

Javascriptですが、こんな感じですか。

http://www.openspc2.org/reibun/javascript/graphi …


ソース：http://www.openspc2.org/reibun/javascript/graphi …
（IE5.5以上のみ）
    • good
    • 0
    • 件
通報する
この回答へのお礼

こちらの方法は知っているんです、すみません。
わたしが知りたいのは背景固定ではなくてスクロールバーがある状態で、画面をスクロールするとグラデーションになっていくという方法です。
以前にそういう方法を使用しているページを見かけたのでどうやるのかと思って探しているんですが、今回教えていただいた方法しか見つけられません。
回答ありがとうございました。

通報する
お礼日時：2006/01/08 21:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報