0

I want to have a scrolling marquee that never ends, and with that, I mean that there will never be a blank space in the marquee.

So when, for example, all text has been in the screen (viewport) and the latest words are marquee'ing, the marquee will repeat without first ending the marquee (meaning: all text has gone away into the left side [marquee: right -> left]). With repeat I mean that the text will just start over right behind where the marquee is

So when I have the marquee text " Hello poeple of the earth •", and that is here:

  • _ = blank
  • ! = Char of first run of marquee
  • ^ = char of second run of marquee
  • & = char of third run of marquee

________!!!!!!!!!!!!!!!!!!!!!!!!!!!!****************************^^^^^^^^^^^^^^^^^^^^^^^^^^^^&&&&&&&&

Ofcourse I need it to be smooth. Something like this answer, but without the blank spaces. The use of libraries doesn't matter.

Can anyone help me?

Jamie
  • 91
  • 1
  • 12
  • What you have tried so for? – NullPointer Jul 10 '18 at 16:06
  • @NullPointer Well, I would have no idea how to make that text appear behind the latest text, it will be an infinite loop so eventually it will get a blank space if I would just add a lot of copies... – Jamie Jul 10 '18 at 16:09

3 Answers3

1

You can use marque plugin to achieve this 

$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 5000,
    //gap in pixels between the tickers
    gap: 0,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: false
});
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
  
<body>
  <div class="marquee">stuff to say 1|</div>
    <div class="marquee">stuff to say 2|</div>
    <div class="marquee">stuff to say 3|</div>
    <div class="marquee">stuff to say 4|</div>
  <div class="marquee">stuff to say 5</div>
</body>
NullPointer
  • 7,094
  • 5
  • 27
  • 41
0

I think this is what you want :)))

function start() {
    new mq('latest-news');
    mqRotate(mqr);
}
window.onload = start;

function objWidth(obj) {
    if (obj.offsetWidth) return obj.offsetWidth;
    if (obj.clip) return obj.clip.width;
    return 0;
}
var mqr = [];
function mq(id) {
    this.mqo = document.getElementById(id);
    var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5;
    var fulwid = objWidth(this.mqo);
    var txt = this.mqo.getElementsByTagName("span")[0].innerHTML;
    this.mqo.innerHTML = "";
    var heit = this.mqo.style.height;
    this.mqo.onmouseout = function () {
        mqRotate(mqr);
    };
    this.mqo.onmouseover = function () {
        clearTimeout(mqr[0].TO);
    };
    this.mqo.ary = [];
    var maxw = Math.ceil(fulwid / wid) + 1;
    for (var i = 0; i < maxw; i++) {
        this.mqo.ary[i] = document.createElement("div");
        this.mqo.ary[i].innerHTML = txt;
        this.mqo.ary[i].style.position = "absolute";
        this.mqo.ary[i].style.left = wid * i + "px";
        this.mqo.ary[i].style.width = wid + "px";
        this.mqo.ary[i].style.height = heit;
        this.mqo.appendChild(this.mqo.ary[i]);
    }
    mqr.push(this.mqo);
}
function mqRotate(mqr) {
    if (!mqr) return;
    for (var j = mqr.length - 1; j > -1; j--) {
        maxa = mqr[j].ary.length;
        for (var i = 0; i < maxa; i++) {
            var x = mqr[j].ary[i].style;
            x.left = parseInt(x.left, 10) - 1 + "px";
        }
        var y = mqr[j].ary[0].style;
        if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) {
            var z = mqr[j].ary.shift();
            z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px";
            mqr[j].ary.push(z);
        }
    }
    mqr[0].TO = setTimeout("mqRotate(mqr)", 20);
}
.marquee {
      position: relative;
      overflow: hidden;
      text-align: center;
      margin: 0 auto;
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    #latest-news {
      line-height: 32px;
      a {
        color: #555555;
        font-size: 13px;
        font-weight: 300;
        &:hover {
          color: #000000;
        }
      }
      span {
        font-size: 18px;
        position: relative;
        top: 4px;
        color: #999999;
      }
    }
<div id="latest-news" class="marquee">
   <span style="white-space:nowrap;">
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">one Lorem ipsum dolor sit amet</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">two In publishing and graphic design</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">three Lorem ipsum is a placeholder text commonly</a>
   </span>
</div>
Tohid Zamani
  • 84
  • 2
  • 10
0

Thank You sire.....I get it....What I need....

function start() {
    new mq('latest-news');
    mqRotate(mqr);
}
window.onload = start;

function objWidth(obj) {
    if (obj.offsetWidth) return obj.offsetWidth;
    if (obj.clip) return obj.clip.width;
    return 0;
}
var mqr = [];
function mq(id) {
    this.mqo = document.getElementById(id);
    var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5;
    var fulwid = objWidth(this.mqo);
    var txt = this.mqo.getElementsByTagName("span")[0].innerHTML;
    this.mqo.innerHTML = "";
    var heit = this.mqo.style.height;
    this.mqo.onmouseout = function () {
        mqRotate(mqr);
    };
    this.mqo.onmouseover = function () {
        clearTimeout(mqr[0].TO);
    };
    this.mqo.ary = [];
    var maxw = Math.ceil(fulwid / wid) + 1;
    for (var i = 0; i < maxw; i++) {
        this.mqo.ary[i] = document.createElement("div");
        this.mqo.ary[i].innerHTML = txt;
        this.mqo.ary[i].style.position = "absolute";
        this.mqo.ary[i].style.left = wid * i + "px";
        this.mqo.ary[i].style.width = wid + "px";
        this.mqo.ary[i].style.height = heit;
        this.mqo.appendChild(this.mqo.ary[i]);
    }
    mqr.push(this.mqo);
}
function mqRotate(mqr) {
    if (!mqr) return;
    for (var j = mqr.length - 1; j > -1; j--) {
        maxa = mqr[j].ary.length;
        for (var i = 0; i < maxa; i++) {
            var x = mqr[j].ary[i].style;
            x.left = parseInt(x.left, 10) - 1 + "px";
        }
        var y = mqr[j].ary[0].style;
        if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) {
            var z = mqr[j].ary.shift();
            z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px";
            mqr[j].ary.push(z);
        }
    }
    mqr[0].TO = setTimeout("mqRotate(mqr)", 20);
}
.marquee {
      position: relative;
      overflow: hidden;
      text-align: center;
      margin: 0 auto;
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    #latest-news {
      line-height: 32px;
      a {
        color: #555555;
        font-size: 13px;
        font-weight: 300;
        &:hover {
          color: #000000;
        }
      }
      span {
        font-size: 18px;
        position: relative;
        top: 4px;
        color: #999999;
      }
    }
<div id="latest-news" class="marquee">
   <span style="white-space:nowrap;">
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">one Lorem ipsum dolor sit amet</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">two In publishing and graphic design</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">three Lorem ipsum is a placeholder text commonly</a>
   </span>
</div>
Ajit
  • 1
  • 1
  • 1
    Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Sep 29 '22 at 15:04