【React】スクロールでふわっと(INVIEW)

みんな大好きスクロールアクションの1つのやり方です。
以前の記事で紹介したスクロールアクションの中で、プラグインinviewを使ったものがありました。
inviewを使ってもうちょっとスパイスを効かせるやり方です。

In-View

1個ずつ順番に表示

使い方は前の記事にあるので省きます。
やり方は簡単同じく、CDN読む→JS書く→CSSでアニメ作る ですね。

findで中身を指定した上で、eachでそれぞれにアクションを付与します。
中身の要素は、クラスかタグを同じものにしないといけませんね！

JS

     

 
$(function() {
    $('.anm2').on('inview', function(event, isInView) {
        if (isInView) {
            $(this).find('.bx').each(function(i) {
                $(this).delay(100 * i).queue(function() {
                    $(this).addClass('trigger').dequeue();
                });
            });
        }
    });
});
    

なんかかっこよくなる

トトトトって感じで連続して出るのでなんかかっこいいです。