https://www.jfe-planteng.co.jp/wps/wp-content/themes/hmr_jfeplanteng2026/js/anime_script.js?ver=20261771555523

1/* =========================================== */
2// テキスト無限アニメーション：速度調整可能（複数対応）
3jQuery(document).ready(function () {
4  const tickers = document.querySelectorAll(".js-tick");
5
6  if (!tickers.length) {
7    // 開発環境でのみ警告を表示
8    const isDevelopment = location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname === "";
9    if (isDevelopment) {
10      console.warn("Required ticker elements not found");
11    }
12    return;
13  }
14
15  // 各ティッカー要素に対してアニメーションを初期化
16  tickers.forEach((ticker) => {
17    const tickerItems = ticker.querySelectorAll(".js-tick-item");
18
19    if (!tickerItems.length) {
20      console.warn("No ticker items found in ticker element");
21      return;
22    }
23
24    // 最初のアイテムの幅を取得
25    const itemWidth = tickerItems[0].offsetWidth;
26
27    // スクロール速度（px/秒）
28    const speed = 50;
29
30    let position = 0;
31    let lastTime = performance.now();
32
33    function animate(currentTime) {
34      const deltaTime = (currentTime - lastTime) / 1000;
35      lastTime = currentTime;
36
37      // 位置を更新
38      position -= speed * deltaTime;
39
40      // 1つ目のアイテムが完全に左に消えたらリセット
41      if (Math.abs(position) >= itemWidth) {
42        position += itemWidth;
43      }
44
45      // transformを適用
46      ticker.style.transform = `translateX(${position}px)`;
47
48      requestAnimationFrame(animate);
49    }
50
51    // アニメーション開始
52    requestAnimationFrame(animate);
53  });
54});
55
56/* =========================================== */
57// animate.css アニメーション
58jQuery(document).ready(function () {
59  // animate.css使用
60  // 要素が画面に入ったら実行
61  const animateClass = ".animate__animated";
62  const elements = document.querySelectorAll(animateClass);
63
64  // 要素が存在しない場合は処理を中断
65  if (!elements.length) {
66    // 開発環境でのみ警告を表示
67    const isDevelopment = location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname === "";
68    if (isDevelopment) {
69      console.warn("No animate__animated elements found");
70    }
71    return;
72  }
73
74  // IntersectionObserverのオプション
75  const observerOptions = {
76    root: null,
77    rootMargin: "0px",
78    threshold: 0.1, // 要素の10%が見えたら発火
79  };
80
81  const handleIntersection = (entries, observer) => {
82    entries.forEach((entry) => {
83      if (entry.isIntersecting) {
84        const target = entry.target;
85
86        // 保存しておいたアニメーションクラスを追加
87        const animationClasses = target.dataset.animationClasses;
88        if (animationClasses) {
89          const classes = animationClasses.split(" ");
90          classes.forEach((className) => {
91            target.classList.add(className);
92          });
93        }
94
95        // 一度だけ実行する場合は、監視を解除
96        observer.unobserve(target);
97      }
98    });
99  };
100
101  const observer = new IntersectionObserver(handleIntersection, observerOptions);
102
103  // 各要素を監視対象に追加
104  elements.forEach((element) => {
105    // 既存のアニメーションクラス（animate__xxx）を取得して保存
106    const animationClasses = Array.from(element.classList).filter(
107      (className) => className.startsWith("animate__") && className !== "animate__animated",
108    );
109
110    if (animationClasses.length > 0) {
111      // アニメーションクラスをdata属性に保存
112      element.dataset.animationClasses = animationClasses.join(" ");
113
114      // アニメーションクラスを一時的に削除（animate__animatedは残す）
115      animationClasses.forEach((className) => {
116        element.classList.remove(className);
117      });
118    }
119
120    // 初期状態を非表示に設定
121    element.style.opacity = "0";
122
123    // 監視開始
124    observer.observe(element);
125  });
126});