【Animate.css + wow.js 総まとめ】スクロール連動やWordPressでの設定方法

function wow_init() {
  wp_enqueue_style('animate', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css');
  wp_enqueue_script('wow', get_template_directory_uri() . '/js/wow.min.js', array(), false, true);
  wp_enqueue_script('my-js', get_template_directory_uri() . '/js/my-js.js', array("jquery"), false, true);
}
add_action('wp_enqueue_scripts', 'wow_init');

function wow_init() {
  wp_enqueue_style('animate', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css');
  wp_enqueue_script('wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), false, true);
  wp_enqueue_script('my-js', get_stylesheet_directory_uri() . '/js/my-js.js', array("jquery"), false, true);
}
add_action('wp_enqueue_scripts', 'wow_init');

function wow_init() {
  wp_enqueue_style('animate', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css');
  wp_enqueue_script('wow', plugins_url("プラグイン名/wow.min.js"), array(), false, true);
  wp_enqueue_script('my-js', plugins_url("プラグイン名/my-js.js"), array("jquery"), "1.0.0", true);
}
add_action('wp_enqueue_scripts', 'wow_init');

  // delay,duration,iterationの設定
  $("[class*='data-wow-']").each(function(){
    const dataArray = ["delay", "duration", "iteration"];
    let elem = $(this);
    let elemClass = elem.attr("class");
    let elemClasses = elemClass.split(" ");
    let count = 0;
    for(let i=0; i<elemClasses.length; i++){
      let className = elemClasses[i];
      for (let n = 0; n < dataArray.length; n++){
        let wowKey = "data-wow-" + dataArray[n];
        if(className.indexOf(wowKey + "-") != -1){
          let wowValue = className.replace(wowKey + "-", "");
          elem.attr(wowKey, wowValue);
          count++;
        }
      }
      if (count == dataArray.length) break;
    }
  });

  // delay,duration,iterationの設定

  // data-wow-という文字列をクラスに持つ要素を１つずつ取り出す↓
  $("[class*='data-wow-']").each(function(){
    // data-wow-に続く文字列を配列でdataArrayに代入↓
    const dataArray = ["delay", "duration", "iteration"];
    // 取り出した要素をelemに代入↓
    let elem = $(this);
    // 要素が持つすべてのクラスをelemClassに代入↓
    let elemClass = elem.attr("class");
    // すべてのクラスを１つずつに分けて配列の形式でelemClassesに代入↓
    let elemClasses = elemClass.split(" ");
    // あとで使用するカウンターを設定↓
    let count = 0;
    // 要素が持つクラスの数分繰り返すfor文↓
    for(let i=0; i<elemClasses.length; i++){
      // 配列elemClassesからクラスを１つずつ取り出してclassNameに代入↓
      let className = elemClasses[i];
      // dataArrayが持つ要素の数分繰り返すfor文↓
      for (let n = 0; n < dataArray.length; n++){
        // dataArrayから１つずつ取り出し、data-wow-〇〇として、wowKeyに代入↓
        let wowKey = "data-wow-" + dataArray[n];
        // もしclassNameがwowKeyを含んでいたら以下を実行する↓
        if(className.indexOf(wowKey + "-") != -1){
          // classNameのwowKey(data-wow-〇〇-)を空文字列に置き換えてwowValueに代入↓（数字だけ残る）
          let wowValue = className.replace(wowKey + "-", "");
          // 初めに取り出した要素のwowKey(data-wow-〇〇)の値をwowValue(数字)とする↓
          elem.attr(wowKey, wowValue);
          // カウンターの数字を+1する↓
          count++;
        }
      }
      // countがdataArrayの数(2)と同じになったら終了する↓
      if (count == dataArray.length) break;
    }
  });

// data-wow-offsetの設定
  var wh = $(window).height();
  $("[class*='wow-of-']").each(function(){
    let elem = $(this);
    let elemClass = elem.attr("class");
    let elemClasses = elemClass.split(" ");
    for (let i = 0; i < elemClasses.length; i++) {
      let className = elemClasses[i];
      if (className.indexOf("wow-of-") != -1) {
        let wowValue = className.replace("wow-of-", "");
        let offsetKey = wh / wowValue;
        elem.attr("data-wow-offset", offsetKey);
      }
    }
  });

// data-wow-offsetの設定

  // 閲覧しているデバイスの画面の高さを取得↓
  var wh = $(window).height();
  // wow-of-という文字列をクラスに持つ要素を１つずつ取り出す↓
  $("[class*='wow-of-']").each(function(){
    // 取り出した要素をelemに代入↓
    let elem = $(this);
    // 要素が持つすべてのクラスをelemClassに代入↓
    let elemClass = elem.attr("class");
    // すべてのクラスを１つずつに分けて配列の形式でelemClassesに代入↓
    let elemClasses = elemClass.split(" ");
    // 要素が持つクラスの数分繰り返すfor文↓
    for (let i = 0; i < elemClasses.length; i++) {
      // 配列elemClassesからクラスを１つずつ取り出してclassNameに代入↓
      let className = elemClasses[i];
      // もしclassNameがwow-of-を含んでいたら以下を実行する↓
      if (className.indexOf("wow-of-") != -1) {
        // classNameのwow-of-を空文字列に置き換えてwowValueに代入↓（数字だけ残る）
        let wowValue = className.replace("wow-of-", "");
        // 画面の高さ / wowValue(数字)をoffsetKeyに代入↓
        let offsetKey = wh / wowValue;
        // 初めに取り出した要素のdata-wow-offsetの値をoffsetKey(数字)とする↓
        elem.attr("data-wow-offset", offsetKey);
      }
    }
  });