How to create running text (marquee) using CSS

Question

I face quite big stuck while studying CSS animation.

I'm going to make a "transform: translate" animation which shows text that overflow content width like below situation.
How it works?: (Youtube video link)

var div1 = document.getElementById("div1");
var cont = document.getElementById("content");
var inf = document.getElementById("inf");

inf.innerHTML = "<p> Does the text inside h1 cut off? : " + (cont.offsetWidth < cont.scrollWidth) +
  "<br><b>Length of text overflow</b>: " + (cont.offsetWidth - cont.scrollWidth) +
  "<br> h1 width: " + (cont.offsetWidth) + ", h1's text length: " + (cont.scrollWidth) + "</p>";


div1.style.backgroundColor = "#A13DAF";
cont.style.webkitAnimationName = "moving";
cont.style.animationName = "moving";

cont.style.animationDuration = "3s";
cont.style.webkitAnimationDuration = "3s";

cont.style.animationTimingFunction = "linear";
cont.style.webkitAnimationTimingFunction = "linear";

#div1 {
  margin: 10px;
  width: 300px;
  background: rgb(40, 40, 40);
  white-space: nowrap;
  overflow: hidden;
}

#content {
  color: white;
  width: 100%;
  /* animation-name: moving;
    animation-duration: 3s;
    animation-timing-function: linear;
    -webkit-animation-name: moving;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear; */
}

@keyframes moving {
  0% {
    transform: none;
    -webkit-transform: none;
  }
  65% {
    /*below code is pseudo code, It doesn't work,
          It is an explanation of the direction I want but.. I can't find way to ...ㅠㅠ*/
    transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
    -webkit-transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
    /*below value is caculated value of fixed text length and content width,
          but if either of these changes, this code will not be available for my purpose.
          Is there any way to specific values of CSS elements?*/
    transform: translate( -668px, 0);
    -webkit-transform: translate( -668px, 0);
  }
  100% {
    transform: translate( -668px, 0);
    -webkit-transform: translate( -668px, 0);
  }
}

<div id="div1">
  <h1 id="content">
    The only thing that matters now is everything You think of me
  </h1>
</div>
<div id="inf"></div>

Like Above code,
I want to make the text to move left in the content (h1), as much as the amount of the cut off cause of its overflow.
But, I can't find a way to refer values of content in CSS.

Is there any way to modify a CSS value by referring to a specific value of another element in the CSS without JavaScript?

I try to avoid the method of changing the keyframe using Javascript as much as possible, though it can be quite heavy.

Thank you very much.

Roko C. Buljan · Accepted Answer · 2020-05-10 18:17:27Z

4

You could animate both transform and simultaneously the margin-left so that the animation will end exactly at the text-end:

.marquee {
  position: relative;
  overflow: hidden;
  background: rgb(161, 61, 175);
  color: #fff;
}

.marquee span {
  display: inline-block;
  min-width: 100%; /* this is to prevent shorter text animate to right */
  white-space: nowrap;
  font-size: 2.5em;
  animation: marquee 4s ease-in-out forwards;
}

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

<h1 class="marquee">
  <span>The only thing that matters now is everything You think of me</span>
</h1>

<p class="marquee">
  <span>Beware of short texts!</span>
</p>

edited May 10, 2020 at 18:17

answered May 10, 2020 at 18:00

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J4BEZ Over a year ago

oh.. this is just what I want!!! but.. How can I stop the shortage sentence marquee reverse..ㅠㅠ

Roko C. Buljan Over a year ago

@J4BEZ Done. Simply add min-width: 100%; to the inner SPAN element. :)

Temani Afif · Accepted Answer · 2020-05-11 11:33:55Z

2

Here is another idea with only transform used as animation:

.marquee {
  overflow: hidden;
  background: rgb(161, 61, 175);
  color: #fff;
}

.marquee > span {
  display:block;
  animation: marquee 4s ease-in-out;
  transform: translateX(100%);
}
.marquee > * > span {
  display: inline-block;
  min-width: 100%;
  white-space: nowrap;
  font-size: 2.5em;
  animation:inherit;
  transform: translateX(-100%);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
}

<h1 class="marquee">
  <span>
    <span>The only thing that matters now is everything You think of me</span>
  </span>
</h1>

<h1 class="marquee">
  <span>
    <span>The only thing that matters now is everything</span>
  </span>
</h1>

<p class="marquee">
  <span>
    <span>Beware of short texts!</span>
  </span>
</p>

edited May 11, 2020 at 11:33

answered May 10, 2020 at 19:08

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

2 Comments

J4BEZ Over a year ago

This answer is also a great idea! Thank you for your kind and interesting answer!!!

Roko C. Buljan Over a year ago

Yes, more markup but at least animates exclusively over a GPU accelerable CSS property. Valuable example Temani.

Collectives™ on Stack Overflow

How to create running text (marquee) using CSS

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related