Charles Tester Charles Tester - 5 months ago 88
jQuery Question

CSS Marquee speed

Using CSS for a marquee effect, the code is running perfect. My only issue is speed.

When the text is short the marquee takes longer. When the text is long the marquee runs very quickly. I know the above is because of the animation time

animation: marquee 15s linear infinite;


Is there a way to run the marquee at a consistent speed no matter the text length?
I am open to use Javascript if needed (I have tried but not succeeded.)

Here is my current CSS code:

<style>
/* Make it a marquee */
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite;
animation-delay: 10s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */

@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */

.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px 'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}
</style>


HTML

<div class="marquee">
<p class="scroll marquee"><span id="scrolltext"></span></p>
</div>


UPDATE

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script>


<style>
/* Make it a marquee */

.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */

@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */

.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}
</style>
</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>

</body>

</html>

Answer

Right, this is more of a math problem than anything.

We can do a simple Time = Distance/Speed calculation like this

function calcSpeed(speed) {
  // Time = Distance/Speed
  var spanSelector = document.querySelector('.marquee span');
  var spanLength = spanSelector.offsetWidth;
  var timeTaken = spanLength / speed;
  spanSelector.style.animationDuration = timeTaken + "s";
}
calcSpeed(100);

function calcFastSpeed(speed) {
  // Time = Distance/Speed
  var spanSelector = document.querySelector('.fast.marquee span');
  var spanLength = spanSelector.offsetWidth;
  var timeTaken = spanLength / speed;
  spanSelector.style.animationDuration = timeTaken + "s";
}
calcFastSpeed(500);
/* Make it a marquee */

.marquee {
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  background-color: #000000;
  bottom: 0px;
  color: white;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee linear infinite;
  animation-delay: 5s;
  background-color: #000000;
  color: white;
  bottom: 0px;
}
/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(10%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
/* Make it pretty */

.scroll {
  padding-left: 1.5em;
  position: fixed;
  font: 50px'Verdana';
  bottom: 0px;
  color: white;
  left: 0px;
  height: 10%;
}
<div class="marquee">
  <span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<br />
<div class="fast marquee">
  <span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span>
</div>

Of course, this is a simple example that doesn't take into account how long the 'track' is, but now you know the basics I'm sure you can work it out :-)

Here is another example with 2 different lengths of text traveling at the same speed

function calcSpeed(speed) {
  // Time = Distance/Speed
  var spanSelector = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanSelector.length; i++) {
    var spanLength = spanSelector[i].offsetWidth,
      timeTaken = spanLength / speed;
    spanSelector[i].style.animationDuration = timeTaken + "s";
  }
}
calcSpeed(100);
/* Make it a marquee */

.marquee {
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  background-color: #000000;
  bottom: 0px;
  color: white;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee linear infinite;
  animation-delay: 5s;
  background-color: #000000;
  color: white;
  bottom: 0px;
}
/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(10%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
/* Make it pretty */

.scroll {
  padding-left: 1.5em;
  position: fixed;
  font: 50px'Verdana';
  bottom: 0px;
  color: white;
  left: 0px;
  height: 10%;
}
<div class="marquee">
  <span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<br />
<div class="marquee">
  <span>Well I hope it goes off the screen</span>
</div>

Comments