CSSで marquee を実装する。横スクロールアニメーション

昔marqueeというタグがありましたが、html5から非推奨とされてしまいました。

単純に文字の横スクロールを繰り返すというタグなのですが、フィーチャーフォンなどの広告などではよく使用されていました。

最近またmarqueeが見直されているようです。先日、私も久しぶりに実装する機会がありました。

とはいえmarqueeタグは使えないので、CSSアニメーションで実装しました。

CSSで実装する横スクロールアニメーション(marquee)

CODE

css

// HTML
<div class="text-marquee__container">
    <div class="text-marquee__text">CSSで実装するMarquee横スクロールアニメーション！</div>
</div>

// CSS
.text-marquee__container {
  overflow: hidden;
}
.text-marquee__text {
  transform: translateX(100%);
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

簡単な解説

外側のタグでoverflow: hiddenを指定し、枠外にでた要素を見えなくします。

中身のタグに単純な横スクロールアニメーションを指定してあげれば完成です。

CSS/SASSのおすすめ書籍

CSSやSCSSは基本がわかればあとはGoogle先生で調べた方が早いと思います。CSSの仕組みやSASSの使い方だけわかれば基本はOKです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

📦

Amazon で関連書籍・ツールを検索

CSS フロントエンドデザイン

Amazonで探す →（アソシエイトリンク）