スクロールで表示領域に入ったらじわ～っと画像をぼかしからくっきりへとアニメーションしながら表示させる

うぇぶもようの中の人

8年前

スクロールしていくと、じわ～っとにじんだ画像が
くっきりとアニメーションで表示される表現、すてきだと思いませんか？
すごく好きなんです。ぼかしとかにじみ。
うぇぶもようでもつかってるんです。
これを今回表示する方法をご紹介します。

デモページ

デモページ作成してみました。
ご参考までにご覧下さいませ～
何回でもスクロール表示させるたびにじわじわにじみます！
デモページはこちら

スクロールイベントができる「inview.js」

まずは、スクロールしたとき、表示領域に入ったらイベントを開始させるjsをつかいます。
head内にjQuery、inview.jsの読み込みと、スクリプトの記述をして準備OKです！
jQueryのダウンロードはこちらから
 inview.jsのダウンロードはこちらから

js

$(function() {
  $('img').on('inview', function(event, isInView) {
    if (isInView) {
    //表示領域に入った時
      $(this).addClass('img-blur');
    } else {
    //表示領域から出た時
      $(this).removeClass('img-blur');
    }
  });
});

ちょっと簡単に説明すると、
表示領域に入ったらimgタグにimg-blurというクラスをつけるよー
表示領域からはずれたら、img-blurをはずすよー
でもまた表示領域から出たらまたimgタグにimg-blurつけるよー
というかんじです。
なので、1回アニメーションしたらもうしなくていいという方は

$(this).removeClass('img-blur');

はコメントアウトするだけでOKです！

画像をぼかすアニメーションを設定する

ぼかしかたはお好みで調整してくださいね。

css

img {
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.img-blur {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
}

@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
      opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}