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

   2017年5月22日

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

デモページ

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

スクロールイベントができる「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);
}
}

web tipsの記事