「タイムライン」ブロックを横向きに表示する方法

応用：アニメーションを追加する方法

画面幅が480pxを超える場合、「タイムライン」ブロックが画面内に現れたときにアニメーションで表示します。

完成イメージ

STEP1
ホワイトスネイク

生物の記憶とスタンド能力を、CDのような形状の「DISC」にして取り出す、能力を持つ。
STEP2
C-MOON

ホワイトスネイクと、緑色の赤ちゃんが融合してできたスタンド。半径約3km以内にある物体の重力の方向を、本体のプッチ神父を中心に、逆転させる能力を持つ。
STEP3
メイド・イン・ヘブン

C-MOONが進化したスタンド。全世界の時を、加速させる能力を持つ。

実装方法

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
以下の手順で設定します。
1. 「テーブル」ブロックを配置します。
2. 高度な設定→追加CSSクラスにmy-timelineと入力します。

ラベル

JavaScriptを追加

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

jQuery(function ($) {
  $('.my-timeline').each(function () {
    const timelineItems = $('.timeline-item', this);
    const itemCount = timelineItems.length;

    // タイムライン内の総アイテム数を設定
    $(this).css('--count', itemCount);

    // 各アイテムのインデックス番号設定
    timelineItems.each(function(index) {
      $(this).css('--item', `${index}`);
    });
  });

  // 要素の状態を監視
  const observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(entry => {
      // 要素が画面内に入った場合
      if (entry.isIntersecting) {
        // アニメーションクラスを追加
        $(entry.target).addClass('show');

        // 一度画面内に入った要素は監視対象から削除
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.5 });

  // 対象の「タイムライン」ブロックを監視対象に登録
  document.querySelectorAll('.my-timeline').forEach(myTimeline => {
    observer.observe(myTimeline);
  });
});

ラベル

CSSを追加

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

@media (min-width: 481px) {
  .my-timeline {
    --delay: 2s;

    > .timeline {
      display: flex;

      > .timeline-item {
        opacity: 0;
        transition: opacity 1s, transform 1s;
        width: 100%;

        /* ポイント */
        &::before {
          height: 16px;
          left: 0;
          top: 30px;
          width: 16px;
          z-index: 1;
        }

        /* ラベル */
        .timeline-item-label {
          float: unset;
          padding: 0 0 30px;
          text-align: unset;
        }

        /* タイムラインコンテンツ */
        .timeline-item-content {
          border-left: unset;
          float: unset;
          padding: 0 0 0 16px;
          width: unset;
        }

        /* プログレスライン */
        .timeline-item-snippet::after {
          background-color: #e5e5d1;
          content: '';
          height: 3px;
          position: absolute;
          top: 36px;
          transition: width var(--delay) ease;
          transition-delay: calc(var(--item) * var(--delay));
          width: 0;
        }
      }
    }

    /* アニメーション表示 */
    &.show > .timeline > .timeline-item {
      opacity: 1;
      transition-delay: calc(var(--item) * var(--delay));

      .timeline-item-snippet::after {
        width: 100%;
      }
    }
  }
}