質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1909閲覧

スクロール量に応じて文字の色を変化させたい。

sajirari

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/09/28 02:28

前提・実現したいこと

どなたか助けてください。
以下のt01、t02、t03がスクロール量に応じて文字色を変化するようにしたいのですが、
jsの書き方で困っています。

<div id="textBox"> <p id="t01">あいうえおかきくけこ</p><p id="t02">さしすせそたちつてと</p><p id="t03">なにぬねのはひふへほ</p> </div>
デフォルト======= color: white; opacity: 0.7; font-size: 100px; ==============
100pxスクロールしたら、#t01に以下を付与したい。==== .op1{ color: black; opacity: 1; } ============== ※#t02、#t03 変化なし
200pxスクロールしたら、#t02に以下を付与し、#t01はデフォルトに戻したい。==== .op1{ color: black; opacity: 1; } ※#t03 変化なし ==============
300pxスクロールしたら、#t03に以下を付与し、#t01、#02はデフォルトに戻したい。==== .op1{ color: black; opacity: 1; } ==============

以下のJSを途中まで書いた所で、分からなくなってしまっております。

//スクロール発火イベント window.addEventListener( "scroll" ,function(){ //スクロールの高さを取得 let scroll = window.pageYOffset; if( scroll > 100 ){ $('#t01').addClass('op1');

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/09/28 02:31

t01,t02,t03は位置固定なのでしょうか? それごとスクロールしてしまうと表示からきえてしまう場合もあるので・・・
sajirari

2021/09/28 02:53

ご返信をありがとうございます。 これごとスクロールするのですが、見えている範囲でも変化が確認できなかったので、どうしたものかな、といった感じです。 どうぞ宜しくお願いいたします。
guest

回答1

0

ベストアンサー

javascript

1<style> 2#textBox p{ 3color: white; 4opacity: 0.7; 5font-size: 100px; 6} 7#textBox p.active{ 8color: black; 9opacity: 1; 10} 11<script> 12window.addEventListener('scroll', ()=>{ 13 var s=window.pageYOffset; //貼り付け忘れ 14 t01.classList.toggle('active',s>=100 && s<200); 15 t02.classList.toggle('active',s>=200 && s<300); 16 t03.classList.toggle('active',s>=300 && s<400); 17}); 18</script>

投稿2021/09/28 05:12

編集2021/09/28 05:53
yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sajirari

2021/09/28 05:49

ありがとうございます。 すみません、うまくいかないようで、初歩的な質問で申し訳ないのですが、 こちらは基本のjsも読み込みが必要でしょうか? HTMLの記述は以下の通りです。 ======================= <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="textBox"> <p id="t01">あいうえおかきくけこ</p><p id="t02">さしすせそたちつてと</p><p id="t03">なにぬねのはひふへほ</p> </div> <script> window.addEventListener('scroll', ()=>{ t01.classList.toggle('active',s>=100 && s<200); t02.classList.toggle('active',s>=200 && s<300); t03.classList.toggle('active',s>=300 && s<400); }); </script> </body> </html> CSSの記述は以下の通りです。 ======================= @charset "utf-8"; /* CSS Document */ html, body, p{ margin: 0; padding: 0; } body{ background-color: white; } #textBox{ width: 800px; margin: 0 auto; background-color: #FF4081; padding: 600px 0; } #textBox p{ color: white; opacity: 0.7; font-size: 100px; display: inline; } #textBox p.active{ color: #000!important; opacity: 1!important; }
yambejp

2021/09/28 05:54

すみませんsの設定を貼り付け忘れてました
sajirari

2021/09/28 05:57

ありがとうございます!!!! できました!!! teratailを初めて利用したのですが、早急に適確なご回答を頂けて本当に感謝です。 ご教授いただきまして、本当にありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問