【Astro】Marqueeコンポーネントを実装する

Astroにおいて、Marqueeコンポーネントを実装します。

手順

src/components/Marquee.astroというファイルを作成し、以下のように編集する。

---
const { message, duration } = Astro.props;
---

<style define:vars={{ duration }}>
  .marquee {
    overflow: hidden;
  }

  .marquee p {
    display: inline-block;
    margin: 0;
    padding-left: 100%;
    white-space: nowrap;
    animation: marquee var(--duration) linear infinite;
  }

  @keyframes marquee {
    from {
      transform: translate(0%);
    }
    to {
      transform: translate(-100%);
    }
  }
</style>

<div class="marquee">
  <p>{message}</p>
</div>

以下のようにインポートすることで、Marqueeコンポーネントを使用できる。

---
import Marquee from '../components/Marquee.astro';
const { pageTitle } = Astro.props;
---

<style>
  .dotted-border {
    width: 640px;
    padding: 5px 0;
    border: dotted 4px;
    color: #0088ff;
  }
</style>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <meta name="generator" content={Astro.generator} />
  <title>{pageTitle}</title>
</head>
<body>
<div class="dotted-border">
  <Marquee message="今年度も頑張りましょう!" duration="15s" />
</div>
<slot />
</body>
</html>