Seamless scrolling text

Question

I'm trying to implement something similar to a news ticker, except I don't know the size of the text that is being scrolled. The end of the text has to be followed immediately by the beginning of the text (wrapped). My current solution involves me duplicating the text to make it look infinite, but I'm having issues getting it to look seamless.

Currently I have this: http://jsfiddle.net/theintellects/e7td1g0w/1/

Code in question:

    var containerwidth = $ticker.width();
    var left = containerwidth;
    var width = $tickerText.width();    
    function tick() {
        if (--left < -width) {
            left = 0;
        }
        $tickerText.css("margin-left", left + "px");
        setTimeout(tick, settings.speed);
    }
    tick();

You'll notice that the text wraps around but there is a breakpoint where I reset the left-margin, and causes a "jump". Is there any way to make this seamless? I'd prefer not to have to keep appending the string to itself and allow it to scroll forever to the left.

@IagoMelanias I agree. Updated to something more reasonable. — theintellects, Oct 19 '15 at 05:36
Use `marquee` tag. Just kidding... http://stackoverflow.com/questions/10547797/very-simple-very-smooth-javascript-marquee — Caio Tarifa, Oct 19 '15 at 05:38
@CaioTarifa I've looked at that one, but it only loops once the whole text disappears. In my case I want the beginning of the text to wrap to the end, instead of having whitespace follow it. — theintellects, Oct 19 '15 at 05:47

Suchit kumar · Answer 1 · 2015-10-19T07:03:24.227

in your tick function do not set left with 0 just comment that line.

    $.fn.ticker = function (options) {
        'use strict';

        var settings = $.extend({}, $.fn.ticker.defaults, options);
        var $ticker = $(this);
        var tickerdata = {
            'content': 'I have some news for you, here is some breaking news that is looping around and around on and on and never seems to end. But what if it ends?'
        };

        var docfragment = document.createDocumentFragment();
        var $tickerText = $('<span/>', {
            class: 'ticker-text',
            html: tickerdata.content
        }).appendTo(docfragment);
        $ticker.append(docfragment);

        var containerwidth = $ticker.width();
        var left = containerwidth;
        var width = $tickerText.width();

        function tick() {
               if (--left< -width) {
                    left = containerwidth;//try setting it with container width
               }
            $tickerText.css("margin-left", left + "px");
            setTimeout(tick, settings.speed);
        }
        tick();
        return this;
    }

    $.fn.ticker.defaults = {
        speed: 11//change this for good visibility
    };
 $('.ticker').ticker();

.ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
    background-color: blue;
    color: yellow;
    display: inline-block;
}
.ticker .ticker-text {
    top: 0;
    height: 100%;
    padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticker"></div>

In this scenario the text ends unless I append the same string over and over and over to the end. Without appending, the text ends instead of looping forever (I want it to loop). — theintellects, Oct 19 '15 at 05:42

guest271314 · Answer 2 · 2015-10-19T05:55:39.580

Try using .animate() within tick function

function tick() {
    return $tickerText.css("marginLeft", left * 2)
        .animate({
        marginLeft: "-" + (left * 2) + "px"
    }, 3000, "linear", tick)
}

$.fn.ticker = function(options) {
      'use strict';

      var settings = $.extend({}, $.fn.ticker.defaults, options);
      var $ticker = $(this);
      var tickerdata = {
        'content': 'I have some news for you, here is some breaking news that is looping around and around on and on and never seems to end. But what if it ends?'
      };

      var docfragment = document.createDocumentFragment();
      var $tickerText = $('<span/>', {
        class: 'ticker-text',
        html: tickerdata.content
      }).appendTo(docfragment);
      $ticker.append(docfragment);

      var containerwidth = $ticker.width();
      var left = containerwidth;
      var width = $tickerText.width();

      function tick() {
        return $tickerText.css("marginLeft", left * 2)
          .animate({
            marginLeft: "-" + (left * 2) + "px"
          }, settings.duration, "linear", tick)
      }
      tick();
      return this;
    }

    $.fn.ticker.defaults = {
      speed: 1,
      duration: 5000
    };
    $('.ticker').ticker({duration:10000});

.ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 100%;
  background-color: blue;
  color: yellow;
  display: inline-block;
}
.ticker .ticker-text {
  top: 0;
  height: 100%;
  padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="ticker"></div>

jsfiddle http://jsfiddle.net/3ez9e81o/2/

Holy damn, please decrease the speed on that. Even with a cup of coffee I don't think I'd be able to read this! — Bram Vanroy, Oct 19 '15 at 05:54
haha, I set the animation to 10,000ms instead. @guest271314 I tried something like this also, but my biggest problem is that I have to wrap the text around immediately (no whitespace after), which is why I duplicated the string, causing the choppy margin-left reset instead of allowing it to go off the screen and reset it by the whole width. — theintellects, Oct 19 '15 at 05:59

Seamless scrolling text

2 Answers2

Linked