javascript - How to create running text (marquee) using CSS - Stack Overflow

admin管理员组

文章数量:1414908

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>

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.

• javascript
• html
• css
• css-animations

Share Improve this question Follow edited May 11, 2020 at 15:08 Temani Afif 275k2828 gold badges366366 silver badges486486 bronze badges asked May 10, 2020 at 17:47 J4BEZJ4BEZ 40666 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>

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>

本文标签： javascriptHow to create running text (marquee) using CSSStack Overflow