HTML/CSS/JS で iOS 7 スタイルのアプリを作成しています。私たちは多くのトリッキーなテクニックを使用しており、要素をアニメーション化できるようにしたいので、生の画像だけを使用するのではなく、HTML/CSS/JS でそれらすべてを適用しています。
ぼかしの場合、blur.js を使用して、非常に良い結果が得られます。a の後ろだけをぼかして、<div>
その周りの div をアニメートすると、div の後ろの画像だけがぼやけるので、とてもきれいに見えます。
残念ながら、Photoshop で彩度フィルターも適用しており、それを再現しようとしています。ウェブ上のすべてのものは、彩度低下を画像に直接適用する必要があることを示しているようです(のようなものを介して-webkit-filter:
saturate(50%);
)。これを画像に直接行うと、その背後にある画像が間抜けに見えないと、その背後にある div をアニメーション化できません。
彩度低下の「レイヤー」を適用する方法はありますか? 私が検討していた強引な方法の 1 つは、div の位置を使用して画像のどこを飽和させるかを決定することでしたが、これがパフォーマンスを損なうのではないかと心配していました。