下の図のバウンススクロールして空いた隙間の部分

こちら通常であれば

body {
  background-color:#FF0000;
}

で好きな色を設定できます。 (画像やグラデーションは不可)

さらになんと、iOS8~の場合この部分を動的に変えてもちゃんと反映されるのをたまたま発見しまして、 一見あまりにも細かすぎる部分なのですが、何か粋な演出のひとつとして使えないかと思いまして、 こんなコンテンツをつくってみました。

※iPhone(iOS8~)
http://ikeryou.jp/works/mazemaze/
・タップでランダムに色変更
・ディーププレスで彩度を変更

<a href=""http://ikeryou.jp/works/mazemaze/" target="_blank">

画面上下の色の合計した色を、バウンススクロールで生じた隙間に反映させてます。 そして、さらにスクロールを続けていくと、例えば下にスクロールし続けていき、 画面下の色が追い出されるにつれて、隙間に反映させていた色から画面下の色を引くことで、 2色の合計値の割合をバウンススクロールでコントロールできるコンテンツです。

非常にマニアックで気付きにくい部分ですが、 うまく演出に落とし込めれば、 意識の高いwebコンテンツになる事間違いなしです sarafi(iOS8~)限定なので敷居は高いですが、、、

• safari(iOS8~)