【Javascript】お知らせを縦スクロールアニメーションで表示する・ニュースティッカーのサンプルプログラム

<div class="news_area">
  <div id="news_ticker" class="news_ticker">
    <div class="news_ticker_inner">
      <div class="list">
        <article class="item">
          <p class="time">2021/4/1</p>
          <h3 class="title">
            タイトル1
          </h3>
        </article>
        <article class="item">
          <p class="time">2021/5/1</p>
          <h3 class="title">
            タイトル2
          </h3>
        </article>
        <article class="item">
          <p class="time">2021/6/1</p>
          <h3 class="title">
            タイトル3
          </h3>
        </article>
      </div>
    </div>
  </div>
</div>

  .time, .title {
    display: inline;
  }

  .news_ticker .news_ticker_inner {
    height: 30px;
    overflow: hidden;
    width: 400px;
    border: 1px solid #aaa;
  }

  .news_ticker .posts {
    padding: 0 0 0 38px;
    position: relative;
  }

  .news_area {
    border: 1px solid #333;
    padding: 10px;
  }

   $(document).ready(function () {
    NewsTicker.init();
  });

  var NewsTicker = ({
    init: function () {
      var self = this;
      self.newsTicker();
    },

    newsTicker: function () {
      var self = this;
      var $ticker = $('#news_ticker');

      /* アニメーション表示リスト */
      var $list = $ticker.find('.list');
      var $item = $ticker.find('.item');

      /* ループ表示用 clone */
      var clone = $item.eq(0).clone().addClass('is-clone');

      /* アニメーションの実行タイマー */
      var timer;
      var current = 1;

      /* 表示アイテム個数 */
      var length = $item.length;

      /* 表示アイテムの表示幅 */
      var distance = parseInt($item.css('height'), 10);

      /* 表示アイテム１個目をクローンしたものをリストに追加 */
      $list.append(clone);

      /* 表示アイテムを縦にスライドさせるアニメーション */
      function rotate() {
        $list.stop().animate({
            top: -distance * current,
          },
          1500,
          function () {
            if (current >= length) {
              current = 1;
              $list.css({
                top: 0
              });
            } else {
              current++;
            }
          });
      }

      /* タイマーセットメソッド autoPlay*/
      function autoPlay() {
        timer = setInterval(function () {
          rotate();
        }, 3500);
      }

      /* マウスイベントでタイマーON/OFF */
      $ticker.on({
        'mouseenter': function () {
          clearTimeout(timer);

        },
        'mouseleave': function () {
          autoPlay();
        }
      });

      autoPlay();
    }
  });

      /* ループ表示用 clone */
      var clone = $item.eq(0).clone().addClass('is-clone');

      /* 表示アイテム１個目をクローンしたものをリストに追加 */
      $list.append(clone);