【コピペでOK】CSSアニメーションで流れる文字を作ろう！

サイトで流れる文字を見たことがあるでしょうか？<marquee>タグでも出来るようですが、こちらのタグは非推奨となっているようです。

今回は<marquee>タグに変わって、CSSアニメーションでやってみたいと思います！

<marquee>タグ

【参考サイト】

https://　developer.mozilla.org/ja/docs/Web/HTML/Element/marquee

▼でも使い方は簡単！marqueeタグで囲むだけ。

▼Google Chromeでは動きました

でも非推奨でいつ使えなくなるかわからないので、animationを使ってみましょう🎵

CSSアニメーション

▼htmlはこのようにしてみました

---

<div class="loop-area">

   <p>Lorem Ipsumは、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、1500 年代に未知の印刷業者がタイプのギャレーを取り、それをスクランブルしてタイプ見本帳を作成して以来、業界の標準的なダミーテキストでした。</p>

  </div>

---

pタグの中に適当に文を入れてみてください。

▼CSSはこのようにしてみました

---

<style>

   body {

    margin: 0;

    padding: 0;

   }

   .loop-area {

    background-color: royalblue;

    display: flex;

   }

   .loop-area p {

    color: #fff;

    white-space: nowrap;

    animation: loop 20s linear -5s infinite;

    margin: 0;

    padding: 10px 20px;

   }

   ＠keyframes loop {

    0% {

     transform: translateX(100%);

    }

    100% {

     transform: translateX(-100%);

    }

   }

  </style>

---

⚠️keyframesの前のアットマークは半角のアットマークにしてください。

⚠️body { margin: 0; padding: 0; }は必要なかったら外してOKです。

▼このようになりました！

【参考サイト】

https://　coco-factory.jp/ugokuweb/css02/

---

いかがでしたか？

これからもWeb制作に役立つちょっとした豆知識をお伝えして参ります🌷

もしよかったら他の記事もチェックしてみてくださいね🎵

お疲れ様でした⭐️