【jQuery】wordpressの投稿にアニメーションをつける

適当にアニメーションできるようになったのでお試しがてらやった事を書いておきます。

の事をしました。

jQueryライブラリ読み込みは恐らくみなさんやられているか、テーマに勝手に入っていると思うので割愛します。

animate.cssはこちらのページで配布されております。これを子テーマの中に保存し、style.cssの初めに読み込むようにしておきました。

ちなみに中身はこんな感じに、それぞれのアニメーションについて設定されております。

値を変えればアニメーションに変化を加えられますね（十分すぎるほど整っておりますが）

<div class=”kizaki naiyou” id=”kizaki5″ style=”visibility:hidden;”>
例えばこの枠であればこんな値を入れております。ｃｓｓで一個一個設定せずに要素にスタイルを指定しております。
たくさん書くと複雑化して管理がめんどくさくなるのであんまり書くのはオススメしません
</div>

たくさん書くと複雑化して管理がめんどくさくなるのであんまり書くのはオススメしません

<script>
jQuery(window).scroll(function (){
  var scroll = jQuery(window).scrollTop();//ページトップからのスクロール距離
  var kizakitakasa6 = jQuery("#kizaki6").offset().top; //idがkizaki6である要素のページとトップからの距離
  var windowHeight = jQuery(window).height(); //画面の高さ
  if (scroll > kizakitakasa6 - windowHeight/2){ //画面の半分の場所まで来たら実行するif文
    jQuery('#kizaki6').css('visibility','visible');//要素を表示させる
    document.getElementById('kizaki6').classList.add("fadeInDown", "animated");//アニメーションと紐づいているクラス名を追加する
  }
});
</script>

これのＩＤ部分を変えていけば、いろんな要素にアニメーションを定義できます

時間が出来たら書き直そうかなーと思っております。