文字が流れる・左右往復編


1 左右往復も・CSS編
右から左」とその逆の「左から右」は紹介しましたが、CSSを使った「左右往復」を紹介します。
すぐ下の動きがCSSを使って表現したものです。


 あっちを立てれば~ こっちが立たず~ 



※白い枠の中に、表現してみましたが気にしないでください。
下で、ソースを紹介しますが、白い枠の部分は複雑になるのでソースから削除しました。

arrows-3274996_1920.jpg
Gerd AltmannによるPixabayからの画像


2 ソースです
HTMLのソース
<p class="marquee-anima">
<span>(ここに流したいテキスト文が入る)</span>
</p>



CSSのソース
.marquee-anima {
  overflow: hidden;
  color: rgb(51,51,51); 
}

.marquee-anima span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(10%);
  }
  50% {
    transform: translate(-120%);
  } 
 100% {
    transform: translate(10%);
  } 

ソースの下部の「@keyframes」中の記述に「0%」、「50%」、「100%」の3段階ありますが、
スタート時(0%)の位置が10%、中間時(50%)の位置が-120%、終わり(100%)の位置がスタート時の10%になるように20秒かけて少しづつ動き、これを繰り返しています。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 59

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
面白い 面白い 面白い 面白い 面白い 面白い 面白い
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • tor

    文字の流れるシリーズ
    面白いですが
    どのように私のブログに使うか・・・
    まだまだ書くだけでいっぱいいっぱいです。
    2020年01月25日 18:48
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    非推奨のタグを使うならば、いとも簡単です。
    torさんの記事中のワンポイントで使う場面は多いと思います。
    なお、私の過去の記事中でも何度か使っていますが、ほとんどの方はその存在を気づかなかったと思います。

    ところで、茹でピーナッツを買ってきました。
    でも、塩味はなくて醤油味しかありませんでしたので、今回はやむを得ず、次回は是非とも塩味にと、てっきり同じメーカーの製品だと思っていました。
    torさんの記事を改めて読むと、別メーカーと分かりガッカリです。
    「〇イチビキ」なのに私が購入したのは「☓カモ井」でした。
    それで渋々ビールの友にしました。
    2020年01月27日 09:59