「タイムライン」ブロックにアニメーションを追加する方法

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  const $elm = $('.timeline-item');

  // 対象要素が存在しない場合は処理を終了する
  if (!$elm.length) {
    return;
  }

  // タイムラインの線を描画するための要素を各アイテムの先頭に追加
  $elm.prepend('<div class="border-line"></div>');

  // ページスクロール、リサイズの場合
  $(window).on('load scroll resize', function () {
    // 現在のウィンドウのスクロール位置を取得
    const winTop = $(window).scrollTop();

    // ウィンドウの高さを取得
    const windowHeight = $(window).height();

    // 判定基準となる画面中央の位置を閾値として設定
    const threshold = windowHeight / 2;

    // 各タイムラインアイテムを走査して進捗率を個別に算出
    $elm.each(function () {
      const $this  = $(this);
      const $line  = $this.find('.border-line');
      const elmTop = $this.offset().top;

      // 対象要素がまだ閾値（画面中央）に達していない場合は高さを0%にして処理をスキップ
      if (winTop + windowHeight - threshold <= elmTop) {
        $line.css('height', '0%');
        return;
      }

      // 各タイムラインアイテムの総高さをマージン込みで取得
      const elmHeight = $this.outerHeight(true);

      // 高さの取得に失敗した場合は処理をスキップする
      if (!elmHeight) {
        return;
      }

      // スクロール位置と閾値をもとにボーダーラインの伸び率（％）を計算
      let per = ((winTop + threshold - elmTop) / elmHeight) * 100;
      // 計算結果が0%から100%の間に収まるよう値を制限
      per = Math.min(Math.max(per, 0), 100);

      // 算出した進捗率をボーダーラインの高さに適用
      $line.css('height', per + '%');
    });
  });
});

以下のコードをstyle.cssに追加します。

.timeline-box {

  /* タイムラインアイテム */
  .timeline-item {
    border: 0 !important;

    /* ポイント */
    &::before {
      z-index: 1;

      @media (max-width: 480px) {
        left: -9px;
      }
    }

    /* コンテンツ領域 */
    .timeline-item-content {
      border: 0;
      padding: 0 0 1.5em 1em;
    }

    @media (max-width: 480px) {
      flex-direction: column;
    }
  }

  /* スクロール連動線 */
  .border-line {
    background-color: #e5e5d1;
    display: block;
    height: 0;
    left: 110px;
    position: absolute;
    top: 0;
    width: 3px;
    z-index: 0;

    @media (max-width: 480px) {
      left: -2px;
    }
  }
}