inview.jsの準備をしよう
「inview.js」の準備については以下記事をご確認ください。
今回は説明はほぼ省いて、いろんなフェードインを紹介していきます。
フェードインのタイミングや時間などは好みやサイトの世界観、ターゲットユーザーなどに合わせてご変更ください。
例1：下から上へフェードイン（1度だけ）
See the Pen inview.js パターン1 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
簡単な解説
.inview1{
opacity: 0; /*表示前に透明にしておく */
transform: translateY(20px); /*表示前の位置 */
transition: 0.8s; /*移動にかける時間 */
transition-delay: 0.1s; /*遅延をかける秒数 */
}transform: translateY(20px); を置いて、フェードイン要素までスクロールしたときに20px分下からじわっと表示しているイメージです。ここの値を大きくするとより移動距離がでてダイナミックになります。
例2：下から上へフェードイン（何度もアニメーション）
See the Pen inview.js パターン2 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
簡単な解説
$(function(){
$('.inview1').on('inview', function(event, isInView){
if (isInView) {
$(this).addClass('show');
}else{
$(this).removeClass('show');
}
});
});画面外に出た場合は「show」クラスを外すことで何度もアニメーションされるようにしています。例1からHTMLとCSSに変更はありません。
タブ表示の要素に上記inviewを追加して何度もフェードインアニメーションを付けると、よりリッチなサイトになるかもしれません。
例3：その場でフェードイン
See the Pen inview.js パターン3 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
簡単な解説
.inview1{
opacity: 0; /*表示前に透明にしておく */
transition: 0.8s; /*移動にかける時間 */
transition-delay: 0.1s; /*遅延をかける秒数 */
}アニメーション起動前は 「opacity:0;」にしておき、スクロールで画面に要素がはいったときに、opacityを1にして、じわっと表示させるイメージです。これも結構実務で使っています。
例4：2カラムの要素に時差を使て表示
See the Pen inview.js パターン4 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
↑ 全画面表示で見たほうが分かりやすいかもしれません
簡単な解説
.inview1.delay{
transition-delay: 0.3s;
}表示を遅らせたい要素に「delay」クラスを追加し、transition-delayの数値を大きくして、左・右の順に表示させています。商品が2列に並んでいるところに追加したり、いろいろ使えます。
3カラムの場合はもうひとつクラス追加してから、transition-delayの数値を大きくして～って流れで作成していきましょう。
例5：スクロール時にタイトルにボーダーを引くイメージ
See the Pen inview.js パターン5 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
簡単な解説
.inview1 span{
display:inline-block;
position:relative;
z-index:2;
}
.inview1 span:before{
content:'';
position:absolute;
left:0;
bottom:0;
width:0;
height:30%;
background:skyblue;
z-index:-1;
transition:0.5s;
}
.inview1.active span:before{
width:100%;
}疑似要素を持ったタグがスクロールで画面にはいったら「active」クラスを追加、もともとwidth:0;だった疑似要素を100%にして、背景色を伸ばすイメージです。
heightやbackground等をいじってカスタマイズしてください。
