CODEWITHSUNDEEP
javascriptcss
w0f
w0f

Reputation: 958

CSS: Wrapping Marquee

I am making a marquee in Javascript and CSS that displays various notifications. Right now, I am using Javascript to update the transform: translateX() on a specified interval.

Here's a codepen of what I have working so far.

I would like to have the marquee wrap around so that there is always text present on the screen. Currently, it does not wrap around until everything has disappeared.

I have found a similar example (using CSS keyframes) that seems to have solved this issue by including the marquee text twice in a row. I would prefer not to have to do this if at all possible, as the marquee won't be text when live, but rather a bunch of icons and other elements, and that could get messy.

Upvotes: 1

Views: 3170

Answers (1)

ecg8
ecg8

Reputation: 1392

You have to have the text twice to achieve the effect you are looking for. The codepen you reference controls the widths so that both texts are never in the visible marquee simultaneously. Here is another example that does this by tying the width of the outer div to the width of the inner div with jQuery, and uses white-space: nowrap. I didn't write this codepen, BTW.

HTML

<div id="maindiv">
  <div id="div1">
    &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
  </div>
  <div id="div2">
    &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
  </div>
</div>

CSS

#maindiv{
  border: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

#div1 {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

#div2 {
  display: inline-block;
  animation: marquee2 10s linear infinite;
  animation-delay: 5s;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

jQuery

$('#maindiv').width($('#div1').width());

Upvotes: 3

Related Questions