スクロールで要素をふわっと表示させる「jquery.inview.js」ブートストラップ4CDNバージョン

スクロールで要素をアニメーションさせ、アニメーション設定もCSSで簡単にできる「jquery.inview.js」、レスポンシブの1枚ページの利用頻度が高くなってきているので便利なJSです。

でもちょっと「jquery」のバージョンなどの理由で動かない場合があります。ブートストラップ4で動く「jquery.inview.js」のサンプルを作ってみました。

全て「CDN」ですので単体のHTMLで動きを確認できます。

CDNでの読み込み

「jquery」と「jquery.inview.js」をCDNで読み込む

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- inview JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>

※「jquery」は3系、2系、では上手く動かない場合があるので1系。1.9.1以上であればBootstrap4.0.0でも問題ありません。

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- inview JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
<!-- inview 追加JS -->
<script type="text/javascript" src="inview 追加JSの場所"></script>

 

inview 追加JS(inview設定JS)

参考サイト https://brightonline.jp/web/jquery/i39/

※HTMLに直接記載するのか追加JSとして外に置くかは自由です。

 $(function() {
        // フェードイン
        $('.inviewfadeIn').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('fadeIn');
            } else {
                $(this).stop().removeClass('fadeIn');
            }
        });
 
        // 上へスライド
        $('.inviewUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('Up');
            } else {
                $(this).stop().removeClass('Up');
            }
        });
        // ズームイン
        $('.inviewzoomIn').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('zoomIn');
            } else {
                $(this).stop().removeClass('zoomIn');
            }
        });
        // フェードインしながら上へスライド     
        $('.inviewfadeInUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('fadeInUp');
            } else {
                $(this).stop().removeClass('fadeInUp');
            }
        });
    });

 

CSS(スタイルシート)

参考サイト https://brightonline.jp/web/jquery/i39/

※HTMLに直接記載するのか追加CSSとして外に置くのは自由です。

    /*----- フェードイン -----*/
    .inviewfadeIn {
        opacity: 0;
        transition: .8s;
    }
    
    .fadeIn {
        opacity: 1.0;
    }
 
    /*----- 上へスライド -----*/
    .inviewUp {
        transform: translate(0, 40px);
        -webkit-transform: translate(0, 40px);
        transition: .8s;
    }
    
    .Up {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
 
    /*----- ズームイン -----*/
    .inviewzoomIn {
        transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transition: .8s;
    }
    
    .zoomIn {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
    } 
    
    /*----- フェードインしながら上へスライド -----*/
    .inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 60px);
        -webkit-transform: translate(0, 60px);
        transition: .8s;
    }
    
    .fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

 

ブートストラップ4でのサンプル(HTML単体で動きます)

サンプルを見てみる
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>スクロールで要素をアニメーション表示させるブートストラップ4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- CSS -->
<style>
   .box {
   margin: 100px auto;
    }
   .inviewfadeIn {
        opacity: 0;
        transition: .8s;
    }
    .fadeIn {
        opacity: 1.0;
    }
    .inviewUp {
        transform: translate(0, 40px);
        -webkit-transform: translate(0, 40px);
        transition: .8s;
    }
    .Up {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
    .inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 60px);
        -webkit-transform: translate(0, 60px);
        transition: .8s;
    }
    .fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
    .inviewzoomIn {
        transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transition: .8s;
    }
    .zoomIn {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
    }
</style>
</head>
<body>
<div class="container">
    <div class="content clr" id="content">
        <h2>ブートストラップ4サンプル</h2>
        <h3>FadeIn</h3>
        <div class="box">
            <img class="inviewfadeIn fadeIn mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>Up</h3>
        <div class="box">
            <img class="inviewUp mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>ZoomIn</h3>
        <div class="box">
            <img class="inviewzoomIn mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>FadeInUp</h3>
        <div class="box">
            <img class="inviewfadeInUp mx-auto d-block" src="https://placehold.it/800x400">
        </div>
		<h3>FadeIn</h3>
        <div class="box">
            <img class="inviewfadeIn mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>Up</h3>
        <div class="box">
            <img class="inviewUp mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>ZoomIn</h3>
        <div class="box">
            <img class="inviewzoomIn mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>FadeInUp</h3>
        <div class="box">
            <img class="inviewfadeInUp mx-auto d-block" src="https://placehold.it/800x400">
        </div>
    </div>
</div>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- inview JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
<script>
    $(function() {
        $('.inviewfadeIn').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('fadeIn');
            } else {
                $(this).stop().removeClass('fadeIn');
            }
        });

        $('.inviewUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('Up');
            } else {
                $(this).stop().removeClass('Up');
            }
        });

        $('.inviewzoomIn').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('zoomIn');
            } else {
                $(this).stop().removeClass('zoomIn');
            }
        });

        $('.inviewfadeInUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('fadeInUp');
            } else {
                $(this).stop().removeClass('fadeInUp');
            }
        });
    });
</script>
</body>
</html>

 

ブートストラップ4でのサンプル <動きは1度だけ>(HTML単体で動きます)

先程のHTMLだとスクロールで何度もアニメーションします、それは「うざい!」、一度だけ・・・とういう場合は「else~」部分を外します。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>スクロールで要素をアニメーション表示させる(一度だけ)ブートストラップ4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- CSS -->
<style>
   .box {
   margin: 100px auto;
    }
   .inviewfadeIn {
        opacity: 0;
        transition: .8s;
    }
    .fadeIn {
        opacity: 1.0;
    }
    .inviewUp {
        transform: translate(0, 40px);
        -webkit-transform: translate(0, 40px);
        transition: .8s;
    }
    .Up {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
    .inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 60px);
        -webkit-transform: translate(0, 60px);
        transition: .8s;
    }
    .fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
    .inviewzoomIn {
        transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transition: .8s;
    }
    .zoomIn {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
    }
</style>
</head>
<body>
<div class="container">
    <div class="content clr" id="content">
        <h2>ブートストラップ4サンプル</h2>
        <h3>FadeIn</h3>
        <div class="box">
            <img class="inviewfadeIn fadeIn mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>Up</h3>
        <div class="box">
            <img class="inviewUp mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>ZoomIn</h3>
        <div class="box">
            <img class="inviewzoomIn mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>FadeInUp</h3>
        <div class="box">
            <img class="inviewfadeInUp mx-auto d-block" src="https://placehold.it/800x400">
        </div>
		<h3>FadeIn</h3>
        <div class="box">
            <img class="inviewfadeIn mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>Up</h3>
        <div class="box">
            <img class="inviewUp mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>ZoomIn</h3>
        <div class="box">
            <img class="inviewzoomIn mx-auto d-block" src="https://placehold.it/800x400">
        </div>
        <h3>FadeInUp</h3>
        <div class="box">
            <img class="inviewfadeInUp mx-auto d-block" src="https://placehold.it/800x400">
        </div>
    </div>
</div>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- inview JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
<script>
    $(function() {
        $('.inviewfadeIn').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('fadeIn');
            } 
        });

        $('.inviewUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('Up');
            } 
        });

        $('.inviewzoomIn').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('zoomIn');
            } 
        });

        $('.inviewfadeInUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('fadeInUp');
            } 
        });
    });
</script>
</body>
</html>

 

 

コメント

タイトルとURLをコピーしました