読者です 読者をやめる 読者になる 読者になる

バウンススクロールで背景色を変える

こちらのiPhoneのsafari(iOS8~)でバウンススクロールした際に見える背景色ですが、

通常であれば、cssでbodyに対してbackground-color:#FF0000とかで自由に変える事ができます。(グラデーションや画像は不可)
この部分を動的に変えて欲しい、っていう機会は滅多になく、まさか動的に変えられるとは思ってなかったのですが、やったら普通にできました。
一体いつ使うのかは不明ですが、一応こんな風に見えます。
バウンススクロールした距離によって黒から白にグラデーションさせています。

さらに、無理やりですが、この機能を使ったデモを作ってみました

※iOS8~ safari限定

MazeMazeColor

上下に別れた色(タップ&長押しで変更可)を混ぜた色をバウンススクロールで見えた部分に反映させ、さらにスクロールを続けると、例えば下にスクロールして、下部分の色が隠れていくにつれ、混ぜた色から下の色が引かれていくような見え方になっています。
毎フレームbodyのbackground-colorの値を変えているだけですが、githubにソースをアップしておきます。

github.com

敷居は高いですが(iPhoneのsafari(iOS8~)限定なので)、ここまで凝ることができれば、かなり意識の高いコンテンツを作れるのではないでしょうか!どうか試させてください!