How to use marquee correctly?

user_10265686 0
Viewed 1558

I need the tag <a> into DIV named box to be duplicated to show the text on all line marquee with no cuts, I'm new here so please if you need some more information, please comment and I will update immediately, thanks.

$('.box').marquee({
  duration: 20000,
  gap: 0,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});
.box {
  margin: auto;
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.box1 {
  margin-top: 14px;
  position: relative;
}

.box1 li {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="box">
  <ul class="box1">
    <li>
      <a>TEXT MARQUEE</a>
      <a>TEXT MARQUEE</a>
    </li>
  </ul>
</div>

marquee css html jquery javascript
1 Answers

Ok i figured out what the problem is here, the content inside gets duplicated when the current scrolling text is touching the left border of the box.

so to have a seemless endless marquee effect you would have to have text that is 100% width of your screen... that is hard to achieve.

if you limit the width of the box it can work, see example:

$('.box').marquee({
  duration: 4000,
  gap: 20,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});

$('.box2').marquee({
  duration: 4000,
  gap: 20,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});
.box {
  margin: auto;
  width: 300px;
  font-size: 20px;
  line-height:1.2;
  height: 1.2em;
  overflow: hidden;
  margin-bottom: 1em;
}
.box--1 {
  background: rgba(255,0,0,.2);
}
.box--2 {
  background: rgba(255,0,0,.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="box box--1">
  <a>TEXT MARQUEE</a>
</div>

<div class="box box--2">
  <a>the longer the text gets the better this endless scrolling works</a>
</div>

i dont know if there are better js solutions to this, but what you really want is a duplicate each time the last one touches the right border of the box. so that there is a continous stream of new text comming in, no matter how long the text really is.

cheers

user_80472530
Related