テキストが流れていくバナーをつくる


今回は、横へテキストが流れるバーを作ってみました!

目次

サンプルコード

こちらを一式コピぺすれば実現できます!

HTML

<div class="text">
<p>
 Almost before we knew it, we had left the ground.Almost before we knew it, we had left the ground.
</p>
</div>

CSS

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800&display=swap');

* {
 margin: 0;
 padding: 0;
 font-family: 'Orbitron', sans-serif;
}

.text {
  display: block;
  width : 100%;     
  padding: 10px;        
  overflow : hidden;
  background: #333;
}

.text p{
  display : inline-block; 
  padding-left: 100%; 
  white-space : nowrap;
  padding: 5px 0;
  animation : scroll 30s linear infinite; 
  color: lightgreen;
}


@keyframes scroll{
  0% { 
    transform: translateX(0)
  }
  100% {

    transform: translateX(-100%)
  }
}

この帯をクリックして、別リンクへ飛ばしたい!
という場合があると思います。

これは、divタグ をaタグに変更。
href属性にリンクを貼ってあげればOKです。

コードの解説メモ

・padding-left: 100%; → 左側に余白を作ることで、画面右側から登場させる
・white-space : nowrap; →  文字が改行せず、1行で表示
・translateX() →  正の数値を指定すると右方向に、負の数を指定すると左方向に動く

ちなみに、POPEYEでの使い方が面白かった。

https://popeyemagazine.jp/

  • URLをコピーしました!
目次