通知エリアのメッセージをスクロール表示する方法

表1に示す項目を設定します。

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

.notice-area {
  overflow: hidden;

  span {
    animation: marquee 20s linear infinite;
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

以下のコードを「カスタムHTML」ウィジェットに追加します。

<ul class="ticker">
  <div class="ticker-wrap">
    <li><a href="#"><span>1つ目のお知らせ。</span></a></li>
    <li><a href="#"><span>2つ目のお知らせ。</span></a></li>
    <li><a href="#"><span>3つ目のお知らせ。</span></a></li>
    <li><a href="#"><span>1つ目のお知らせ。</span></a></li> <!-- クローン -->
  </div>
</ul>

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

.body {
  .ticker {
    background-color: #333;
    height: 2.5em;
    overflow: hidden;
    position: relative;

    .ticker-wrap {
      align-items: center;
      animation: scrollTicker 10.5s linear infinite;
      display: flex;
      flex-direction: column;
    }

    li {
      height: 2.5em;
      line-height: 2.5em;
      list-style: none;
      margin: 0;
      white-space: nowrap;
    }

    span {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

@keyframes scrollTicker {
  0%     { transform: translateY(0); }
  28.57% { transform: translateY(0); }      /* 3秒停止 */
  33.33% { transform: translateY(-2.5em); } /* 0.5秒移動 */

  61.90% { transform: translateY(-2.5em); } /* 3秒停止 */
  66.66% { transform: translateY(-5em); }   /* 0.5秒移動 */

  95.23% { transform: translateY(-5em); }   /* 3秒停止 */
  100%   { transform: translateY(-7.5em); } /* 0.5秒移動 */
}