How to make this "scroll tape bar" with CSS

Question

I would like to ask if you can show me how to make the "scroll tape bar" (I don't know the correct term for this object) that is in this store: https://thefutureofficial.eu/

"scroll tape bar here"

Thanks a lot guys.

Simone.

Please read [how to ask](https://stackoverflow.com/help/how-to-ask) and edit your question - you need to at least attempt to build and provide us with the code you've written and where things went wrong. SO isn't a code-writing service, but we'll gladly help you when you get stuck! — chazsolo, Mar 18 '21 at 14:40
Welcome to StackOverflow! Please read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) and [take the tour](https://stackoverflow.com/tour) — Rojo, Mar 18 '21 at 14:44
The "scroll tape bar" is usually referred to as a ["marquee"](https://stackoverflow.com/questions/56522476/how-to-create-a-marquee-using-css-or-javascript). — Turnip, Mar 18 '21 at 14:45
Hi guys, I googled a lot about the "scroll tape bar" but I didn't find any kind of similar info. Thanks a lot for your help — imones, Mar 18 '21 at 14:53
search for "carousal". I think this is what you need. For eg:- [Bootstrap JS Carousel](https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp) — shotgun02, Mar 18 '21 at 14:57
Hi shotgun02, I think is more like "marquee" what I'm looking for, thanks anyway for your help :) — imones, Mar 18 '21 at 15:42

score 0 · Accepted Answer · answered Mar 19 '21 at 09:48

Use following Snippet to achieve this effect. You can style the text as per your choice.

.main {
  background:#000;
  padding:0.5rem;
  overflow: hidden;
}
.text {
  color:white;
  animation : slide 10s linear infinite;
  
}
.gap{ margin-right:100px;}

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

  100% {
    transform: translateX(-100%)
  }
}

<div class="main">
  <div class="text">
   <span class="gap">Text</span>
   <span class="gap">Text</span>
   <span class="gap">Text</span>
   <span class="gap">Text</span>
   </div>
</div>

How to make this "scroll tape bar" with CSS

1 Answers1