スクロールに合わせて画像が徐々にぼやけていくエフェクトを施す方法Webページ内に画像を表示して、スクロールに合わせて徐々にその画像をぼかしていく効果を施すサンプルコードをご紹介します。 このサンプルではjQueryを使用して、1枚の画像だけでなく、ページ内にトリガーとなる画像が複数ある場合でもスクロールして可視エリアから外れるにつれて、それぞれの画像が徐々にぼやけていくようにしています。 完成サンプル See the Pen Blurring image as parallax scroll effect by digistate (@digistate) on CodePen. HTMLの基本構成 画像エリアはfigureタグで括り、imgタグと、そのキャプション要素となるfigcaptionで画像上に表示するキャプションテキストを構成しています。 <figure class="banner"> <div class="banner-wrapper"
