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? — Δ O
– Δ O, Commented Oct 14, 2020 at 21:55
If you insist on jQuery solution, see jQuery-Marquee plugin. — Δ O
– Δ O, Commented Oct 14, 2020 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
– kaktus, Commented Oct 14, 2020 at 22:04
The plugin should be able to do that using duplicated property. — Δ O
– Δ O, Commented Oct 14, 2020 at 22:07

Rylee · Accepted Answer · 2020-10-15 01:11:03Z

1

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>

answered Oct 15, 2020 at 1:11

Rylee

1,6761 gold badge8 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rylee Over a year ago

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

kaktus Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related