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

きっかけ

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

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

結論

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

擬似的に実現

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

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

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

デモ

1

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

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

実装方法

1

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

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

まとめ

1

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

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