https://www.shimane-u.ac.jp/_themes/ud/js/ticker.js

1/*
2  スライド用js
3*/
4
5(function(window, document) {
6  const animTime = 5000; // アニメーション時間(ms)
7  const speed = 100; // テキストの移動速度(px)
8  const limit = 0; // ブレークポイント(px)
9  let animId;
10  let isRunning = false;
11
12  const ticker = document.querySelector('.ticker');
13  loadTicker();
14
15  function loadTicker() {
16    tickerAnim();
17    animId = setInterval(tickerAnim, animTime);
18    isRunning = true;
19  }
20
21  // アニメーション処理
22  function tickerAnim() {
23    const items = ticker.querySelectorAll('.ticker-item');
24    const running = ticker.querySelector('.run');
25    let idx, link, first, next;
26    if (!running) { // 実行中の要素がない場合（初回のみ）
27      first = items[0];
28      link = first.querySelector('a');
29      first.classList.add('fadeInDown', 'run');
30      first.style.zIndex = 1;
31      setTimeout(textMove, 1000, link); // 第3引数に引数linkを指定。こうしないと即実行されてしまうので注意。
32    } else {
33      for (let i = 0; i < items.length; i++) {
34        if (items[i] == running) {
35          idx = i; // 実行中要素のインデックスを取得
36          break;
37        }
38      }
39      next = items[(idx + 1) % items.length];
40      running.classList.replace('fadeInDown', 'fadeOutDown');
41      setTimeout(() => {
42        running.classList.remove('fadeOutDown', 'run');
43        running.style.zIndex = 0;
44        link = running.querySelector('a');
45        link.style.transform = 'none';
46        next.classList.add('fadeInDown', 'run');
47        next.style.zIndex = 1;
48        link = next.querySelector('a');
49        setTimeout(textMove, 1000, link);
50      }, 300);
51    }
52  }
53
54  // テキスト移動処理
55  function textMove(elm) {
56    const move = elm.parentNode.clientWidth - elm.clientWidth;
57    if (move < 0) {
58      elm.style.transform = 'translateX(' + move + 'px)';
59      elm.style.transitionDuration = Math.abs(move) / speed + 's';
60    }
61  }
62
63  // ウィンドウサイズ変更時
64  window.addEventListener('resize', () => {
65    const windowWidth = window.innerWidth;
66    if (windowWidth <= limit) {
67      ticker.style.display = 'none';
68      clearInterval(animId);
69      isRunning = false;
70    } else {
71      if (!isRunning) {
72        ticker.style.display = 'block';
73        animId = setInterval(tickerAnim, animTime);
74        isRunning = true;
75      }
76    }
77  });
78})(window, document);