スクロールしてコンテンツが重なった部分にだけぼかしをかけているように見せる

きっかけ

iOS7って半透明のレイヤーの透過した部分だけぼかしがかかりますよね。

CSSでも同じことができないかなと思って調べました。

結論

現在のCSSではできない模様。

擬似的に実現

CSSにはblurというプロパティがあるのですが、このblurはコンテンツ全体にぼかしをかけます。

重なったレイヤーの透過した部分にだけぼかしをかける、といったことはできません。

なので、このblurをうまく使って一部だけのぼかしを擬似的に実現します。

デモ

See the Pen スクロールして重なった部分だけぼかし by SUGAWARA Hiroshi (@5000164) on CodePen

このデモは-webkit-のベンダープレフィックスがついているのであしからず。

実装方法

  まず、HTMLで同じ内容のコンテンツを2つ用意します。

次に、CSSで2つのコンテンツがきれいにくっつくように指定します。
ポイントはoverflow-x: hidden;とoverflow-y: scroll;です。
そうしたら、同じ内容のコンテンツの片方にblurをかけます。
その次は、2つのコンテンツの表示位置を同じ高さに合わせます。
ここではbeforeの擬似要素を使って高さを合わせています。
最後に、JavaScriptでスクロールを同期すれば完了です。

まとめ

  スクロールの制御もJavaScriptでやってしまうと相性がいいのかも知れないと思いました。

とりあえず、半透明のレイヤーの透過した部分にだけぼかしをかけるというCSSのプロパティが欲しいです。

菅原 浩
Web プログラマー。好きな言葉は「安定的に不安定」。オーストラリアで英語を勉強した後に、現在デンマークで幸せについて考えている。
Next Post
青鬼が怖くてコントローラーが持てなくなった - ゲームの感想(青鬼 / Aooni)
Previous Post
TEDの感想(サイモン シネック: 優れたリーダーはどうやって行動を促すか)
Recent Posts
本「リモートチームでうまくいく」の感想
映画「Whiplash」の感想
Android の Chrome で通知の許可設定がタップできない
生きることが難しい
服を買うということ - 映画「The True Cost」の感想