【inview.jsの使い方】簡単なスクロールアクションを作る。

スクロールをして要素が画面内に入ると動き出す(出現する)アクションってよくありますよね。
このようなアクションを簡単に設置する方法をご紹介します。

inview.jsというjQueryプラグインを使うことで、「画面に現れたら」という条件を簡単に付けることができます。これを利用してスクロールアニメーションを作ってみます。

inview.jsを読み込ませる

inview.jsは、「画面に現れたら」という条件メソッドを追加してくれるプラグインです。以下からダウンロードできます。

https://github.com/protonet/jquery.inview

ダウンロードしたファイルの中の「jquery.inview.min.js」を読み込ませます。
もちろんjQuery本体の後に。

inviewメソッドを使って「画面に現れたら」という条件を使う

例えば、動かしたい要素にclass=”inview”を付けます。そして下記の様なスクリプトを書きます。

$('.inview').css({ 'opacity':'0' , 'margin-top':'50px' });
$('.inview').on('inview', function() {
  $(this).animate({'opacity':'1' , 'margin-top':'0px' },2000);
});

まずopacity:0で透明にし、margin-top:50pxで少し下に配置しておきます。
そして、
・inviewメソッドによって要素が画面に現れたときに、
・animateメソッドで不透明になりながらmargin-topが0に戻って上に移動します。

これだけで、よく見かけるアクションの完成ですね。inviewというclassを付けた要素すべてに同じアクションを付けることができます。

easing.jsで動きに緩急を付ける

先ほどのコードだけだと動きに緩急や抑揚が無いので、easing.jsを使ってさらに美しい動きにしていきます。

easing.jsはjQueryでのアニメーションの動きに緩急を付けてくれるプラグインです。
緩急というのは、初めはゆっくりで、最後は早く、というように一定の動きではなく、抑揚(よくよう)のある動きにのことです。

http://gsgd.co.uk/sandbox/jquery/easing/

上記から「jquery.easing.1.3.js」をダウンロードし、こちらもjQuery本体の後に読み込ませます。

そして、アニメーションメソッドの第三引数に用意されたeasing名を書くだけです。

$('.inview').css({ 'opacity':'0' , 'margin-top':'50px' }); 
$('.inview').on('inview', function() { 
  $(this).animate({'opacity':'1' , 'margin-top':'0px' },2000,'easeOutCirc'); 
});

先に書いたソースに’easeOutCirc’が加わっています。これによって動きに抑揚がつくようになりました。

動きの種類はこちらのサイトにまとまっています。最初に早く動かして終わり際にゆっくり、など様々な動きが用意されています。

イージングの動きリスト:https://easings.net

注意点: inview.jsは画面に現れる度、繰り返し起動する

最後に注意点です。

inview.jsによる「画面に現れたら」という条件は何度でも起動します。
つまり、スクロールを上下に動かして、何度も現れたり消えたりしても、画面に現れる度に起動します。

先ほどの動きのソースコードでは、繰り返し起動したとしても、一回目の起動でopacity:0とmargin-top:0になって終わっているため、実際には何度も動いたりはしませんが、inview自体は起動しています。

繰り返し動かすためには、このように書きます。

$('.inview').css({ 'opacity':'0' , 'margin-top':'50px' }); 
$('.inview').on('inview', function(e,onInview) { 
    if(onInview){
        $(this).animate({'opacity':'1' , 'margin-top':'0px' },2000,'easeOutCirc');
    }else{
        $('.inview').css({ 'opacity':'0' , 'margin-top':'50px' }); 
    }
});

function(e,onInview)と書くことで、そのオブジェクトのinviewの状態を取ることができます。

画面に現れると、onInviewはtrueとなり、画面から消えるとfalseになります。

つまり、画面から消えたfalseの状態では、もう一度opacity:0とmargin-top:50pxを付与して動く前の状態に戻します。

すると、再度画面に表れてonInviewがtrueになると動きが発生します。

その他の制御方法

今回はjsから直接cssを操作する動かし方でご紹介しましたが、クラスの付与で制御する方法もあります。複雑な動きの場合にはこちらが良いでしょう。

//classの付与で動きを付ける
$('.inview').on('inview', function(){
    $(this).addClass('move');
});

画面に現れた場合、消えた場合はinviewの状態取得で分岐しましたが、他にもカウンターなどを付けて一度起動するとカウンターが0から1になり、0でないと動かないとする方法もあります。

//カウンターを作って繰り返しの制御をする
var counter = 0;
    
$('.inview').on('inview', function(){
    if(counter == 0){
        $(this).animate({'opacity':'1' , 'margin-top':'0px' },2000,'easeOutCirc');
        counter = 1;
    }
});

動きや全体のサイト構築の内容に合わせて使い分けるのが良いかと思います。