CSSだけでスムーススクロールさせる
とても簡単
html {
scroll-behavior: smooth;
}
これだけ
余談(スクロール実験のため)
以前にスムーススクロールを実装しようとしたら、JavaScriptで結構しっかり作るか、ライブラリを使うか、みたいな選択肢しかなかった。
便利になったもんだなぁ、としみじみ思いました。
背景にグラデーションをかけるCSS
最終目標
こんな感じなことがしたい。
方法
CSSには、linear-gradient()という便利なものが存在します。
これは、2色以上を指定し、直線的にグラデーションした画像を生成してくれるもの。
放射状にグラデーションするradial-gradient()なんかもあります。
ただし、IE9以下は対応していません。
書き方
基本的な書き方は、background: linear-gradient(方向(最終的に到達する箇所), 開始地点の色, 終了地点の色);です。
方向の指定は、例えば「下へ向かう」ならto bottom、「右上へ向かう」ならto right topとなります。
開始地点の色は、to bottomの場合だと、上側の色です。
終了地点の色は、開始地点の逆ですね。
例えば、右上から左下に向けて、白から黒へと変化していく場合は以下のようになります。
background: linear-gradient(to left bottom, rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));
※透過させたい場合に備えて、rgbaで指定しています。別に、#fffとかでも構いません。
▼ 描画例
応用：グラデーションに緩急をつける
background: linear-gradient(to left bottom, rgba(255, 255, 255, 1) 90%, rgba(0, 0, 0, 1));
▼ 描画例
上記のように、色に対してパーセンテージを指定することで、変化する場所を変えることができます。
イメージとしては、上の例でいくと、「90%の地点までは白で塗ってから、グラデーション変化していく」という指示になります。
複数色による変化
色の指定をカンマ区切りで増やすことで、増やすことができます。
例として、白→黒→赤→青としてみます。
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(0, 0, 0, 1), rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
▼ 描画例