jQueryで色の変化を表現したい！
スクロール位置に合わせた表現ができるようになりたい！
などの悩みに答えていこうと思います。
やることとしては、指定した位置までスクロールしたら自動で文字や背景の色が変わるようにします。
例えば、100pxスクロールで文字色を黄色→オレンジなどです。
まずは実際に500pxスクロールした時に、
ポイント
- 文字色が変化（白から黒）
- 背景画変化（赤から青）
- バナーを透過
でやっていこうと思います。
jQueryで特定距離スクロールした時に文字色や背景を変える方法
まずは見本から見ていきましょう。
See the Pen Untitled by haruto kubo (@butacchi) on CodePen.
スクロールすると色や背景が変わるはずです。
コードを解説
こちらがHTMLになります。
<header class="header">
<div class="container">
<div class="title">
<h1>タイトル</h1>
</div>
</div>
</header>
<div class="information-content">
<h2>ここで500pxです。</h2>
</div>
特に変わったところもなくシンプルなものにしてあります。
次にこちらがCSSになります。
body {
margin: 0;
padding: 0;
}
.header {
background-color: red;
padding: 10px 0;
position: fixed;
z-index: 10;
width: 100%;
color: white;
}
.header.change {
background-color: blue;
color: black;
opacity: .5;
}
.information-content {
height: 1000px;
}
h2 {
padding: 500px 20px;
}
こちらもとりわけ変わったところはありませんが、changeクラスを付けることでjQueryによる変化ができるようにしています。
色の変化はcolorやbackground-colorを上書きすることによって表現しています。
次にこちらが肝心のjQueryになります。
$(function() {
$(window).on('scroll', function () {
if (500 < $(this).scrollTop()) {
$('.header').addClass('change');
} else{
$('.header').removeClass('change');
}
});
});
3行目のif文で画面最上部からのスクロールした位置までの距離に合わせて変化するようにしています。
具体的には500px移動したときに、クラスを付け外すことによって変化するようになっています。
数字を変えることによって好きな位置に来た時に変化できるようになります。
jQueryで特定位置までスクロールした時に文字色や背景を変える方法
今度は特定距離ではなく、特定位置までスクロールした時に変化するようにします。
まずは見本を見てみましょう。
See the Pen Untitled by haruto kubo (@butacchi) on CodePen.
今度は特定距離ではなく、2つ目の「テキスト‥」が書かれた位置で変化するようになっています。
コードを解説
コードを解説していきます。
と言っても先ほどとほとんど変わりません。
まずはHTMLからです。
<header class="header">
<div class="container">
<div class="title">
<h1>タイトル</h1>
</div>
</div>
</header>
<div class="information-content height">
<p>テキストテキストテキスト</p>
</div>
<div class="height">
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
変化を分かりやすくするように、2つ目の「テキスト‥」で変わるようにdiv要素を加えました。
次にCSSです。
body {
margin: 0;
padding: 0;
}
.header {
background-color: red;
padding: 5px 0;
position: fixed;
z-index: 10;
width: 100%;
color: white;
}
.header.change {
background-color: blue;
color: black;
opacity: .5;
}
.information-content {
height: 500px;
}
p {
padding: 20px;
}
.height {
height: 300px;
}
こちらもほとんど変わっていません。
HTMLの記述を変えたところにCSSを適用させました。
次はjQueryです。
$(function() {
$(window).on('scroll', function () {
height = $('.height').height();
if (height < $(this).scrollTop()) {
$('.header').addClass('change');
} else{
$('.header').removeClass('change');
}
});
});
先ほどは具体的な数字を変化の境界に設定していましたが、今回はheightクラスの位置での変化となっていますので、3行目でheightクラスの高さを取得しています。
後は先ほどと同じように、スクロール位置がheightクラスより下か上かで変化するようにしています。
まとめ
jQueryを使ってスクロール位置でイベントを発生させる方法を紹介しました。
数字やクラス、要素などを変えることによって自分好みに調整できますので、アレンジして使ってみてください。