なんだかゆっくりしたいわぁ♨ ゆっくりスクロール ゆっくり色変わり

ページトップボタンのついているサイトの中で、ボタンの色がシュッと色が変わって、シャキッとページトップに移動するサイトって少なくないですね。

お硬いサイトやなんかはそれで良いと思うのですが、デザインに凝っているサイトだったり、やわらかコンテンツのサイトだったりすると、シャキッよりも、ニュ〜だったり、スル〜だったりのほうが良い場合もあります。

わざわざそのためだけにjQueryってのも大げさなので、cssだけで実現。

方法はいくつかありますが、ゆるっとスクロールには「scroll-behavior: smooth」。じわ〜っと色変わりには「transition」が、最も手軽にできちゃうかな。

こ〜んな感じです。

scroll-behavior: smooth は、htmlに設定することでサイト全体に活きてくるのですね。便利便利。