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

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

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

CDNでの読み込み

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

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

 

inview 追加JS(inview設定JS)

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

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

 

CSS(スタイルシート)

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

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

 

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

 

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

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