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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 30, 2016 at 14:53 CharlieT asked Jun 30, 2016 at 8:40 CharlieTCharlieT 41466 silver badges2828 bronze badges 5

• 2 Just a note: Javascript has nothing to do with Java except some basic similarities in syntax. – Kai Mattern Commented Jun 30, 2016 at 8:45
• 2 Could you also post your HTML? – Mitchel Jager Commented Jun 30, 2016 at 8:47
• @Charles Tester where is the html code.? – Himesh Aadeshara Commented Jun 30, 2016 at 8:47
• @HimeshAadeshara - HTML was added – CharlieT Commented Jun 30, 2016 at 8:59
• @Charles Tester some detail added you can check – Himesh Aadeshara Commented Jun 30, 2016 at 9:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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>

You can give your sliding element the same width, then they should scroll with the same speed. But it´s not really dynamic.

Or you can calculate the speed depending on the width of the element. See my small demo.

// your time for 10 px in seconds
var timeFor10Px = 0.2;
var animationSettings = 'marquee linear infinite';
var $marque = $('.marque');

$marque.each( function() {
  var outerWidth = $(this).outerWidth();
  var calc = outerWidth / 10 * timeFor10Px;
  $(this).css('animation', animationSettings + ' ' + calc + 's');
});

.holder {
  background: black;
  width: 100%;
  color: white;
}

.marque {
  /* removed, see js tab */
  /*animation: marquee 15s linear infinite; */
  display: inline-block;
}



@keyframes marquee {
  from {
    transform: translate( 0%);
  }
  to {
    transform: translate( 100%);
  }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <span class="marque marqu1">
  Some nice Text
  </span>
  <br>
  <span class="marque marqu2">
  Some nice Text Lorem Ipsum dolor sit amet.....
  </span>
</div>

edit: @Andrew Bones was a little bit faster, with the similar solution

hi here is the example you are trying to do Example

and more if you can provide proper HTML code Details with the question

body { margin: 20px; }

.marquee {
  height: 25px;
  width: 420px;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

<div class="marquee">
  <div>
    <span>You spin me right round, baby. Like a record, baby.</span>
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>

Hii it's look like it's working proper with

 @keyframes marquee {
        0% {
            transform: translate(10%, 0);
        }
        100% {
            transform: translate(-100%, 0);
        }
   }

-------- i used belowed one that works fine for me ----------
------------------ you can try thisss---------------------

@keyframes marquee {
        0% {
            transform: translate(0%, 0);
        }
        100% {
            transform: translate(-100%, 0);
        }
   }