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