Animate text using intervals (and timeouts?) Javascript, JQuery

Question

I would like to make a Text run from left to right in a loop. Here is the fiddle with my attempt: https://jsfiddle.net/9Lruxym8/33/

I started with css @keyframes but I think I need the width of the text itself if I want the text to run seamlessly. My idea was to write down the text two times and once the div with the texts has run exactly halfway, the animation starts again.

After @keyframes didn't work, I tried jQuery animation. It did work somewhat but didn't run smoothly. Now I'd like to do it via transition. I thought a combination of intervals and timeouts could do the trick but I still don't get it to work - and now, I don't know why. Does anyone have a hit for me?

function runText() {
  var text_width = $('#runningP').width()/2;
  console.log(text_width)

  setInterval(function(){
    console.log("interval");
    $('.text').css({'transition':'margin-left 5s'});
    $('.text').css({'margin-left':'-' + text_width + 'px'});
    moveBack();
  }, 3000);

  function moveBack() {
    console.log("timeout")
    setTimeout(function(){
      $('.text').css({'transition':'none'});
      $('.text').css({'margin-left': 0});
    }, 3000);
  }
}

runText();

Does this answer your question? [How can I create a marquee effect?](https://stackoverflow.com/questions/21233033/how-can-i-create-a-marquee-effect) — ΔO 'delta zero', Oct 14 '20 at 21:55
If you insist on jQuery solution, see [jQuery-Marquee](https://github.com/aamirafridi/jQuery.Marquee) plugin. — ΔO 'delta zero', Oct 14 '20 at 21:59
Thanks for the replys! The problem is that I don't want any white space. After the text has run through it should immediately start again. Thus I need to work with the width of the text block. If I am not mistaken I can't do that without javascript/jquery. I'll check out the plugin! — kaktus, Oct 14 '20 at 22:04
The plugin should be able to do that using `duplicated` property. — ΔO 'delta zero', Oct 14 '20 at 22:07

score 1 · Accepted Answer · answered Oct 15 '20 at 01:11

I've recently made a bit of custom code for this functionality.

Looking at my code, it seems a bit much having essentially 3 "levels" (.scrollTextWrap > .scrollingText > .scrollContent) but this was the structure I ended up using to get a clean and consistent effect.

I've added in an initialiser too so that you could simply add the scrollMe class and have them setup the html for you

In the snippet I've added a .parentContainer purely to show how it works when constrained

$(document)
    .ready(function(){
        // check that scrollingText has 2 scrollContent element
        $('.scrollMe')
            .each(function(){
                initScrollingText($(this));
            });
    });
    
function initScrollingText($this){
    // store text
    var text = $this.text();
    
    // empty element
    $this.html(null);
    
    var $wrap = $('<div class="scrollTextWrap" />'),
        $text = $('<div class="scrollingText" />'),
        $content = $('<div class="scrollContent" />');
    
    // set content value
    $content.text(text);
    
    // duplicate content
    $text
        .append($content)
        .append($content.clone());
        
    // append text to wrap
    $wrap.append($text)
    
    // add $wrap to DOM
    $wrap.insertAfter($this);
    
    // remove old element
    $this.remove();
}

/* to simulate width constraints */
.parentContainer {
    width: 140px;
    position:relative;
    overflow:hidden;
}

.scrollTextWrap {
    position:relative;
    width:auto;
    display:inline-block;
}

.scrollingText {
    display: flex;
    position:relative;
    transition:left 0.1s;
    animation: scrollText 5s infinite linear;
}

.scrollContent {
    white-space: nowrap;
    padding-right:5px;
}

@keyframes scrollText {
    0% { left:0 }
    100% { left:-50% }
}

<div class="parentContainer">
    <div class="scrollMe">Content you want to scroll goes here</div>
    <!-- alternatively you can just structure the html -->
    <div class="scrollTextWrap">
        <div class="scrollingText">
            <div class="scrollContent">Content you want to scroll goes here</div>
            <div class="scrollContent">Content you want to scroll goes here</div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I understand this doesn't use any intervals or timeouts as the question asked but I didn't see a need for them. This is essentially a CSS/HTML answer — Rylee, Oct 15 '20 at 01:14
Hey, it worked, thank you so much! It es exactly the effect I was looking for. No need for intervals and timeouts, it was just the last resort for me. — kaktus, Oct 15 '20 at 11:47

Animate text using intervals (and timeouts?) Javascript, JQuery

1 Answers1