スクロールで要素をアニメーションさせ、アニメーション設定もCSSで簡単にできる「jquery.inview.js」、レスポンシブの1枚ページの利用頻度が高くなってきているので便利なJSです。
でもちょっと「jquery」のバージョンなどの理由で動かない場合があります。ブートストラップ4で動く「jquery.inview.js」のサンプルを作ってみました。
全て「CDN」ですので単体のHTMLで動きを確認できます。
CDNでの読み込み
「jquery」と「jquery.inview.js」をCDNで読み込む
|
1 2 3 4 |
<!-- 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でも問題ありません。
|
1 2 3 4 5 6 7 8 9 10 |
<!-- 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として外に置くかは自由です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$(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として外に置くのは自由です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/*----- フェードイン -----*/ .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単体で動きます）
サンプルを見てみる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<!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="http://placehold.it/800x400"> </div> <h3>Up</h3> <div class="box"> <img class="inviewUp mx-auto d-block" src="http://placehold.it/800x400"> </div> <h3>ZoomIn</h3> <div class="box"> <img class="inviewzoomIn mx-auto d-block" src="http://placehold.it/800x400"> </div> <h3>FadeInUp</h3> <div class="box"> <img class="inviewfadeInUp mx-auto d-block" src="http://placehold.it/800x400"> </div> <h3>FadeIn</h3> <div class="box"> <img class="inviewfadeIn mx-auto d-block" src="http://placehold.it/800x400"> </div> <h3>Up</h3> <div class="box"> <img class="inviewUp mx-auto d-block" src="http://placehold.it/800x400"> </div> <h3>ZoomIn</h3> <div class="box"> <img class="inviewzoomIn mx-auto d-block" src="http://placehold.it/800x400"> </div> <h3>FadeInUp</h3> <div class="box"> <img class="inviewfadeInUp mx-auto d-block" src="http://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～」部分を外します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<!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> |
コメント