【JavaScript】スクロールで背景をフェードアウト
スクールすると背景をフェードアウトさせる方法を紹介します。
ホームページに使うと、動的な変化でアクセントになり、なかなかクールな雰囲気になります。
まず、CSSでbody要素に背景画像を設定します。
body {
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/src/image.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: center top;
color: #fff;
}
- 「background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/src/image.png);」で、画像の上に色のフィルターを重ねることができます。（この色のフィルターは、グラデーションをかけることもできますが、今回はグラデーションはなしにしています。） フィルターの透明度は０にします。
- 「background-attachment: fixed;」で、背景画像を固定します。
- 「background-size」「background-position」で、背景画像の大きさ、位置を設定します。
次にJSで、この背景画像の上の色フィルターの透明度を、スクロールにあわせて上げていきます。
var nystories = document.querySelector("p").offsetTop;
window.onscroll = function() {
if (window.pageYOffset > 0) {
var opac = (window.pageYOffset / nystories);
document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), rgba(255, 255, 255, " + opac + ")), url(./img/src/image.png) no-repeat";
}
}
- ここでは、一番最初のp要素がウインドウの一番上にきた時に背景画像が消えるように（画像の上の色フィルターの透明度が１になるように）しています。
これで、クールなサイトを作ってみてはいかがでしょうか？
