[CSS] Animate.cssでアニメーション効果をつける-2

2019年3月18日2021年9月8日

※Animate.cssがv4になり、変更がありました。[CSS] Animate.css v4 スクロールで動かす (初心者も）　で紹介しています。

Animate.cssでを使って、スクロールのタイミングでアニメーションが始まるように出来るinview.jsを使う方法を覚え書きその2．

前の記事、「Animate.cssでアニメーション効果をつける」で紹介した方法より、スクリプトに詳しくない人にとっては、今日紹介する方法は簡単だと思います。

INDEX

headにリンクを書く

inviewをダウンロードします。https://github.com/protonet/jquery.inview

headに記載します。下記のコードは、wordpressで子テーマ内にjsフォルダの中にinview.jsと、この後付け加えるコードを書くためのjsファイルをリンクしています。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="<?php echo get_stylesheet_directory_uri() ?>/js/inview.js"></script>
<script src="<?php echo get_stylesheet_directory_uri() ?>/js/任意のファイル名.js"></script>

htmlを書く

classにanimated を書きます。そして、”inviewなんとかかんとか”を加えます。fadeInLeftやfadeInUpなど、種類はAnimate.cssで確認して下さい。

<h1 class="animated inviewfadeInLeft">Animate.cssとInview.js</h1>

jQueryを書く

先程リンクした任意の名前のjsファイルにコードを書きます。下記の例は、.inviewfadeInRightと.inviewfadeInUpの場合です。

アニメーションが領域に入った時と出た時の状態を書きます。

$(function() {
   $('.inviewfadeInRight').on('inview', function(event, isInView) {
    if (isInView) {
    //in
      $(this).addClass('fadeInRight');
    } else {
    //out
      $(this).removeClass('fadeInRight');
      $(this).css('opacity',0); 
    }
  });
   $('.inviewfadeInUp').on('inview', function(event, isInView) {
    if (isInView) {
    //in
      $(this).addClass('fadeInUp');
    } else {
    //out
      $(this).removeClass('fadeInUp');
      $(this).css('opacity',0);
    }
  });
});

追加するには

下記のくくりをコピペして、fadeInRight　の箇所を書き換えればOKです。

$('.inviewfadeInRight').on('inview', function(event, isInView) {
    if (isInView) {
    //in
      $(this).addClass('fadeInRight');
    } else {
    //out
      $(this).removeClass('fadeInRight');
      $(this).css('opacity',0); 
    }
  });

よかったらシェアお願いします