• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

技術情報・Tips

スクロールに合わせて画像が徐々にぼやけていくエフェクトを施す方法

スクロールに合わせて画像が徐々にぼやけていくエフェクトを施す方法

Webページ内に画像を表示して、スクロールに合わせて徐々にその画像をぼかしていく効果を施すサンプルコードをご紹介します。

このサンプルではjQueryを使用して、1枚の画像だけでなく、ページ内にトリガーとなる画像が複数ある場合でもスクロールして可視エリアから外れるにつれて、それぞれの画像が徐々にぼやけていくようにしています。

完成サンプル

See the Pen Blurring image as parallax scroll effect by digistate (@digistate) on CodePen.

HTMLの基本構成

画像エリアはfigureタグで括り、imgタグと、そのキャプション要素となるfigcaptionで画像上に表示するキャプションテキストを構成しています。

CSSのfilter:blurで発生する画像の輪郭ぼけを補完

ぼかし方法は、figure要素内のimg要素をCSSのfilter:blurで単純にブラーをかけているだけですが、これだとぼかし具合を大きくしたときに、どうしても画像の四隅の輪郭もぼやけて美しくありません。

そこで、今回のサンプルでは簡単にこの画像の縁のぼかしをごまかすため、img要素の親要素であるdivにインラインでbackground-imageをセットし、同じ画像を背景画像として重ね、前面に表示される子要素のimgの画像をfilter:blurでぼかしておきます。

背景画像は輪郭のぼやけを補完するために指定するため、後述するCSSで、背景画像とimg要素の画像の見た目は全く同じにする必要があります。

そうすると、フィルターでぼかしたimgの縁の部分は、divの背景画像で補完されたようになります。
capture-2016-10-31-12-57-28

背景(輪郭ぼけ補完)用のCSS

figureimg要素の親要素であるdiv(.banner-wrapper)のCSSは表示幅にフィットするようにします。

前面(ぼかし用)の画像のCSS

最初に画像にはフィルターでぼかし(blur)を既にかけておき、 初期状態では不透明度を0にして見えなくしておきます。
スクロールでぼかしていくimg要素のCSSも表示幅を100%で伸縮するスタイルで、さらにCSSでフィルターをかけていくときに発生するチラつきを防止するために-webkit-backface-visibility: hiddenを指定しておきます。

これを、後述するjQueryのスクロールイベントopacityの値を変化させてフィルターを施した画像の不透明度を上げていくことで、ぼやけていく感じを演出します。

Javascriptの処理

まずは、共通で利用するグローバル変数で、ブラーをかける画像を持つfigure要素と、ブラーをかける画像要素自体のセレクタ、そしてフィルターでぼやけていく速さをセットします。

DOMロード後に、ページ内のすべてのfigure要素を一旦取得します。

ここからは、jQueryでスクロールイベントを検知してフィルターでぼかした画像のopacity(不透明度)を上げていきます。

スクロールイベントの処理

jQueryでのスクロールイベントの処理は以下の書式で行えます。

スクロールした分の垂直位置を取得するには以下で取得できます。

すべてのfigure要素について処理を行う

banner変数には、すべてのfigure要素のjQueryオブジェクトが格納されているので、これをひとつずつ順番にループ処理します。

フィルターを施したimg要素を処理する

まずは、figureのループ処理内に、さらに子要素であるimgオブジェクトについて処理を行います。

実際にimg要素のopacityに変更を加える条件は、「スクロール位置(scrollTop)が対象のfigure要素の上部位置(offsetTop)を過ぎた位置」、かつ「スクロール位置が対象のfigure要素の最下部に到達するまでの位置」となります。

これを式にすると以下のようになります。

figure要素内にあるimg要素のopacityプロパティの値をスクロール値に応じて変化させることでフィルター済みの画像を徐々に表示させていきます。

opacity0.00〜1.00の間で変化をするため、figure要素(img)の高さを1.00(100%)の変化量として、上部位置を0下部位置が1となるような変化がつくように、opacityの値をスクロール位置に応じて 0〜1の範囲で換算します。

さらに、opacityの値として、これを小数第2位まで取得するようにします。

これで、画像の上部が画面の上までスクロールするとopacityが0.00から正の方向に向かって増加し、画像の下部が画面の上までスクロールして見えなくなる位置まで来たときに、opacityは 1.00 となり、フィルターでぼかしたimg要素が完全に表示されます。

ただ、これだとスクロールして画像がどんどん見切れていく中でブラーがかかっていき、最後は完全に画像がスクロールされて見えなくなったときに初めてopacity:1となるため、見た目的にはだんだん画像がぼやけていく様がわかりにくい感じがします。

そこで、上記のopacityの算出に、スクロールによるopacityの変化量を調整(増加)するための変数を設けてみます。
これが 変数degreeです。

この調整用の変数degreeを組み込んで、最終的に変数opacityの算出は以下の式となります。

ここまではちょっと数学チックで若干ややこしかったですが、ここまで来ればあとはimg要素に得られたopacityの値をjQueryで書き換えてやるだけです!

Javascriptのコード

ここまでのコードをまとめて、最終的に以下のJavascriptができあがります。


今回のサンプルでは、スクロールによってopacity(不透明度)の値を変える、というシンプルなものでしたが、例えば変化する値を背景画像要素の background-position に置き換えてやれば、簡単に自前でパララックススクロール効果を実現することもできますね!

URL
TBURL

COMMENT ON FACEBOOK

Return Top