日: 2020年5月20日

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

現在は　Animate.cssが4.0になてるので注意

https://qiita.com/yaki-shake/items/71791a6453eaf0ca99f5
このサイトではanimateClass: ‘animate__animated’　でanimate__animatedにwowを適応させているのか？

とりま、
ただしアニメーションのクラス名も
fadeIn -> animate__fadeIn
と変わっているのでお気をつけくださいまし。
のこところ

animate.css
https://animate.style/　ここでスタイルチェック

wow.js
https://www.delac.io/wow/

設置

ヘッダー

 

  <link
    rel="stylesheet"
    href="<?php echo get_template_directory_uri(); ?>/0_d/js/animate.min.css"/>

<script src="<?php echo get_template_directory_uri(); ?>/0_d/js/wow.min.js"></script>

<script>
  new WOW(
      
  //{mobile: false}
      
  ).init();
    
    
   
</script>

挿入箇所

<h2 class="d_con_title2 wow animate__animated animate__bounce"><i class=""></i>BLOG</h2>

 <div class="tsuzuki_box2">   
    <a href="/ブログトップ/" class="btn_d wow animate__animated animate__fadeInUp" >BLOG TOP <i class=" icon-right-open"></i></a>
    </div>