この記事の概要
少し前にこんな記事を書きました。
他の方法は無いか考えていて（全然良いとは言えませんが）別のものを見つけたので記事にしてみます。
CSS の filter を使うのですが、派手に使うと意外と重くります。
今回試した限りは問題ありませんでしたが、実務レベルで使えるものではないかもしれません。
というか実装がパワー型過ぎるので、面白半分で読んでください。
完成形
HTML
<body>
<div class="dummy-content">Dummy content for scrolling</div>
<div class="texts">
<!-- たくさんのテキスト -->
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="dummy-content">Dummy content for scrolling</div>
</body>
animation-timelineですべての要素にblurをかける
今回の肝は以下のコードのみです。
@keyframes blur {
from {
filter: blur(2rem); /* お好みの量のブラー */
}
to {
filter: blur(0);
}
}
.texts p {
animation-name: blur;
animation-timeline: view();
animation-range-start: cover 0%;
animation-range-end: cover 50%; /* お好みのブラー終了位置 */
}
画面の外に近くなるほどブラーがかかり、画面の中に入り切るとブラーがなくなる、という仕組みです。
そのため 1 つの大きな要素（ヒーローイメージなど）は Progressive blur の挙動になりませんが、テキストや小さめの画像などであれば割とそれっぽく見えます。
今回は例として分かりやすく画面中央に来るまで要素にブラーをかけていますが、もし実際に使うとなったら 10% や 20% くらいの位置で良いと思います。