Google Mapの埋め込み・レスポンシブ・縮尺の調整・英語表記にする方法【HTML・CSS】
ken-admin-suto
けんすと
こんにちは!けんです。
この記事では、上記の内容をご紹介致します。
まずは、実装後の表示画面を見ていきましょう。
See the Pen スクロールで特定の要素にクラスを追加する方法 by ken (@kensuto) on CodePen.
上記、スクロールすることで、
「テキスト」部分 文字色:白 背景:黒 になりました。
続いて実装の流れを見ていきましょう。
・HTML
1<section>
2 <p class="text">テキスト</p>
3</section>
・CSS
15行目に注目。
“text”のクラスに”add”のクラスを追加することで、文字を白く・背景を黒くします。
1section {
2 height: 5000px;
3}
4
5.text {
6 width: 95%;
7 font-size: 20px;
8 text-align: center;
9 padding: 30px 0;
10 position: fixed;
11 font-weight: bold;
12}
13
14/* 注目 */
15.text.add {
16 background-color: #000;
17 color: #fff;
18}
・JS
下記のコードを記載しましょう。
コードの内容:100px以上スクロールすることで、”text”のクラスに”add”のクラスを追加します。
1// スクロールでクラス付与
2$(window).on("scroll", function () {
3 if (100 < jQuery(this).scrollTop()) {
4 // 100px以上スクロールしたら
5 jQuery(".text").addClass("add");
6 } else {
7 jQuery(".text").removeClass("add");
8 }
9});
※100pxは例で、数値は独自に変えることが可能です。(例:1000pxなど)
※.textやaddも、独自にクラスを変更できます。
今回は、文字色を変える・背景を変えるverをご紹介致しました。
クラスを付与することで、今回の実装以外にも様々なパターンの実装をすることが可能です。
独自にカスタマイズしてみましょう!
以上になります。