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

0

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

最近またmarqueeが見直されているようです。先日、私も久しぶりに実装する機会がありました。
とはいえmarqueeタグは使えないので、CSSアニメーションで実装しました。
今回はCSSの横スクロールアニメーションの紹介です。

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

下記具体的なコードです。

CSSで実装するMarquee横スクロールアニメーション！

CODE

// 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です。

htmlの基礎から学べるのでおすすめ
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

SASSの基本が学べます。
Web制作者のためのSassの教科書