実現したいこと

いつもお世話になっております。

プログラミング初心者です。
今回お伺いしたいのは、下記のサイトのように
スクロールに合わせて背景のbackground-colorの数値を変更させるという方法を
教えていただけますでしょうか？

http://milieu.ink/

行動規範の内容に同意します

回答3件

Firefox には scrollMaxY があるのですが、標準にはないので計算します。
今時互換モードを考慮しなければならないとは思えませんが、一応書いておきます。

JavaScript
1var root = document[document.compatMode === 'BackCompat' ? 'body' : 'documentElement'];
2var scrollMaxY = root.scrollHeight - root.clientHeight;

https://developer.mozilla.org/ja/docs/Web/API/Document/compatMode
https://developer.mozilla.org/ja/docs/Web/API/Window/scrollMaxY

投稿2019/07/17 07:10

x_x

総合スコア13749

spectator

2019/07/18 00:16

丁寧にソースも添付していただきありがとうございます。追加で申し訳ないのですが、こちらはどこに記述すればいいでしょうか？

x_x

2019/07/18 00:26

リンク先を見ればわかるように、scrollMaxY が「文書が垂直スクロールされ得る最大ピクセル数」となるので、それが必要なところに書けばいいです。

spectator

2019/07/18 01:27

アドバイスありがとうございます。参考にさせていただきます。

行動規範の内容に同意します

ベストアンサー

適当に、最初の色と、最後の色をrgbで指定して位置によって変えていけば？

javascript
1<style>
2body{height:3000px;margin:0px;}
3</style>
4
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
6<script>
7$(function(){
8  var start=[118,200,143];
9  var end  =[220,10,45]
10  $(window).on('scroll',function(){
11    var s=$(this).scrollTop();
12    var h=$('body').height()-$('body').prop('clientHeight');
13    var r=start[0]+(-start[0]+end[0])*(s/h);
14    var g=start[1]+(-start[1]+end[1])*(s/h);
15    var b=start[2]+(-start[2]+end[2])*(s/h);
16    $('body').css('background-Color','rgb('+r+','+g+','+b+')'); 
17  }).trigger('scroll');
18});
19</script>

HTML5対応

HTML5(=<!DOCTYPE html>)でプロパティのとり方が変わったことによる問題みたいですね
以下で対応できると思います

javascript
1$(function () {
2  var start = [118, 200, 143];
3  var end = [220, 10, 45]
4    $(window).on('scroll', function () {
5      var s = $(this).scrollTop();
6      var h = Math.abs($('body').prop('clientHeight')-$(window).innerHeight());
7      var r = start[0] + (-start[0] + end[0]) * (s / h);
8      var g = start[1] + (-start[1] + end[1]) * (s / h);
9      var b = start[2] + (-start[2] + end[2]) * (s / h);
10      $('body').css('background-Color', 'rgb(' + r + ',' + g + ',' + b + ')');
11    }).trigger('scroll');
12});

debug用

以下３つのファイル完全のコピペでテストしてください

hoge.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>Untitled Document</title>
6<meta name="Author" content="" />
7<link rel="stylesheet" type="text/css" href="hoge.css">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9<script type="text/javascript" src="hoge.js"></script>
10</head>
11<body>
12</body>
13</html>

hoge.css

CSS
1body{height:3000px;margin:0px;}

hoge.js

javascript
1$(function () {
2  var start = [118, 200, 143];
3  var end = [220, 10, 45]
4    $(window).on('scroll', function () {
5      var s = $(this).scrollTop();
6      var h = Math.abs($('body').prop('clientHeight')-$(window).innerHeight());
7      var r = parseInt(start[0] + (-start[0] + end[0]) * (s / h));
8      var g = parseInt(start[1] + (-start[1] + end[1]) * (s / h));
9      var b = parseInt(start[2] + (-start[2] + end[2]) * (s / h));
10      $('body').css('backgroundColor', 'rgb(' + r + ',' + g + ',' + b + ')');// cssプロパティ ハイフンはNG
11    }).trigger('scroll');
12});

投稿2019/07/16 09:15

編集2019/07/18 01:57

yambejp

総合スコア114784

spectator

2019/07/16 17:13 編集

ざっくりとした質問に対して具体的なソースを提示していただきありがとうございます。重ねてご質問で申し訳ないのですが、先ほど教えていただいたjQueryの記述を試してみたのですが、 background-Colorが変化しません。 htmlファイルは下記のように記述し、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <meta name="Author" content="" /> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="bg.js"></script> </head> <body> </body> </html> bg.jsというファイルで、教えていただいたソースを記述しているのですが、もしお時間があるようでしたらご教授いただけますでしょうか？なんどもお手を煩わせてしまい、申しわけありません。

yambejp

2019/07/17 00:16

開発ツールで見てエラーが出ていませんか？コピペしたソースを見る限りスクリプトタグがおかしいですが・・・

spectator

2019/07/17 03:10

なんどもすみません。こちらコピペするとこの部分だけ文字化けしてしますようで。。。。 cdnで読み込むタイプと自分のローカル状に落としているjQueryで読み込ませてみましたが、 console上でもエラーが表示されず、別ファイル（bg.js）やhtmlファイルに書き込んでみたのですが動作がなくて。。。。。 html上では <script> $(function() { var start = [118, 200, 143]; var end = [220, 10, 45]; $(window).on('scroll', function() { var s = $(this).scrollTop(); var h = $('body').height() - $('body').prop('clientHeight'); var r = start[0] + (-start[0] + end[0]) * (s / h); var g = start[1] + (-start[1] + end[1]) * (s / h); var b = start[2] + (-start[2] + end[2]) * (s / h); $('body').css('background-Color', 'rgb(' + r + ',' + g + ',' + b + ')'); }).trigger('scroll'); }); </script> 別ファイルでは $(function () { var start = [118, 200, 143]; var end = [220, 10, 45] $(window).on('scroll', function () { var s = $(this).scrollTop(); var h = $('body').height() - $('body').prop('clientHeight'); console.log(clientHeight); var r = start[0] + (-start[0] + end[0]) * (s / h); var g = start[1] + (-start[1] + end[1]) * (s / h); var b = start[2] + (-start[2] + end[2]) * (s / h); $('body').css('background-Color', 'rgb(' + r + ',' + g + ',' + b + ')'); }).trigger('scroll'); }); こちらで記述しているのですが。。。。自分の記述ミスだとは思うのですが、昨日より色々触ってみてはいるものの解決できず大変申し訳ないです。。

spectator

2019/07/17 03:23

度々すみません。 console.log(clientHeight); こちらは削除しております。

yambejp

2019/07/17 03:42 編集

HTML5の問題っぽいです。（ちょっと盲点でした）対応版をあげておきました

spectator

2019/07/18 00:34

お忙しいところ何度もご丁寧にありがとうございます。新しくいただいたソースを記述してみました。が、何も変わらずで。。。。デベロッパーツールで見ると、 body自体のbackground-Colorも何も指定されていない状態です。 (自分の認識では始めがbackground-Colorの色が118, 200, 143で表示されるというイメージなのですが間違い無いでしょうか？) Elements部分もスクロールしても何も変化がなく。。。。自分でソースを読み解くことができずすみません。。。

yambejp

2019/07/18 00:50

追記しました。（一部挙動のおかしいブラウザ用調整いれました）ファイル名を含め完全にコピペで試してみてください。ちなみに表示されないとされるOSとブラウザの種類とバージョンを提示した方がよいかもしれません win10のIE7-11/Edge/firefox/chromeあたりで動作確認済みです

spectator

2019/07/18 01:26

何度もご丁寧にご回答いただきありがとうござます！先ほどあげていただいたソースを記述したところ問題なく反映されました。（macos10.4.5/chrome/firefox/safari）自分で書いたソースと見比べてみたところ、読み込ませているjQueryのバージョンが3系列だったのが問題だったようです。 1系列、2系列のjQueryだと問題なく動作が確認できました。自分の無知が問題のなかで、何度もご丁寧に指摘、アドバイスをしていただき本当にありがとうございます。もっと自分で読み解けるようにして今後の糧にしていきたいと思います。ありがとうございました。

yambejp

2019/07/18 01:41

なんとびっくり！！ jQuery3系はcssの指定が変わっているみたいですね 'background-Color' → 'backgroundColor'　とすることで対応可能のようです。

spectator

2019/07/18 02:07

重ね重ねありがとうございます！

行動規範の内容に同意します

参考サイトがあるのでしたら、そのコードを見ていってはどうでしょうか。