Pure CSS Continuous Horizontal Text Scroll Without Break

Pure CSS Continuous Horizontal Text Scroll Without Break

You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).

.marquee {

  margin: 0 auto;

  white-space: nowrap;

  overflow: hidden;

  position: absolute;

}

.marquee span {

  display: inline-block;

  padding-left: 100%;

  animation: marquee 5s linear infinite;

}

.marquee2 span {

  animation-delay: 2.5s;

}

@keyframes marquee {

  0% {

    transform: translate(0, 0);

  }

  100% {

    transform: translate(-100%, 0);

  }

}

<p class="marquee">

  <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - </span>

</p>

<p class="marquee marquee2">

  <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - </span>

</p>

Pure CSS Continuous Horizontal Span Scroll Without Break Starting On-screen

As you're using a background image, there is a simpler way to do that by animating the background image directly and using a background repeat.

PS: not sure what you mean about "that starts halfway into the animation"

.bg-marquee {
    background-color: blue;
    height: 50px;
    width: 100%;
    background-image: url(https://sligoil.com/wp-content/uploads/2022/02/icons-long-01.svg);
    background-repeat: repeat-x;
    background-size: 1000px auto;
    animation: marquee 5s infinite linear;
}

@keyframes marquee {
    0% { background-position: 0; }
    100% { background-position: -1000px; }
}

<div class="bg-marquee"></div>

CSS Scrolling Text Loop

I don't think this is possible in a maintainable way using just CSS. The problem is that there isn't really a way to create elements that can wrap at the box level.

You effectively want an element to be able to appear in 2 places at once: once on the left side of the screen with the remaining content to be scrolled and again on the right side of the screen with the content that has already scrolled. The only CSS thing that I know that can do this is background images in the same way that graphics textures can wrap using UV repeating settings.

Considering that, the options are to use an <svg> which, which is an image, and set it as a repeating background of an element. Then, we can animate the background position to have it scroll.

The problem is that the text is not not selectable (since it's a rasterized image) and you will have to set content within the SVG in the CSS which isn't good practice.

However, as a proof of concept, you could do it. See the snippet below:

@keyframes slide {

  from {

    background-position-x: 0;

  }

  to {

    background-position-x: -100%;

  }

}

.container {

  width: 100%;

  height: 18px;

  background-image: url("data:image/svg+xml;utf8,\

<svg xmlns='http://www.w3.org/2000/svg' width='300'>\

  <text x='0' y='18'>hello world foo bar fizz buzz lorem ipsum</text>\

</svg>\

");

  background-repeat: repeat;

  background-size: auto;

  animation: 5s linear infinite slide;

}

<div class="container"></div>

CSS3 Marquee Effect, Without Empty Space

Here is a sample how you can do, and by setting the delay and duration you control the space between the texts

.marquee {

  background-color: #ddd;

  width: 500px;

  margin: 0 auto;

  overflow: hidden;

  white-space: nowrap;

}

.marquee span {

  display: inline-block;

  font-size: 20px;

  position: relative;

  left: 100%;

  animation: marquee 8s linear infinite;

}

.marquee:hover span {

  animation-play-state: paused;

}

.marquee span:nth-child(1) {

  animation-delay: 0s;

}

.marquee span:nth-child(2) {

  animation-delay: 0.8s;

}

.marquee span:nth-child(3) {

  animation-delay: 1.6s;

}

.marquee span:nth-child(4) {

  animation-delay: 2.4s;

}

.marquee span:nth-child(5) {

  animation-delay: 3.2s;

}

@keyframes marquee {

  0%   { left: 100%; }

  100% { left: -100%; }

}

<p class="marquee">

  <span>this is a</span>

  <span>simple marquee</span>

  <span>using css</span>

  <span>only tech</span>

  <span>with a delay</span>

</p>

How can I eliminate big black space in this animation

The padding-left: 100% makes for the initial black space, and the subsequent black space, as the animation starts at 0, which is where the padding starts.

In the following code, I've removed that padding and changed where the animation stops so that there should be no gap.

You may need to play with the value, depending on the number of KURT BURGERS     repetitions you have, and the width of the viewport. In fact, you might need to use some media queries to set it correctly depending on viewport width.

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 100000;
  background-color: black;
  margin-top: 25px;
  /* transform: rotate(1deg); */
}

.marquee span {
  display: inline-block;
  /*padding-left: 100%;*/
  animation: marquee 10s linear infinite;
  color: #c9c9c9;
  font-family: nos;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-55.25%);
  }
}

<p class="marquee">
  <span>KURT BURGERS    KURT BURGERS    KURT BURGERS    KURT BURGERS    KURT BURGERS    KURT BURGERS    KURT BURGERS    KURT BURGERS    KURT BURGERS    KURT BURGERS    KURT BURGERS</span>
</p>

---

Related Topics