Бегущая строка без использования тега <marquee>

#javascript #css

Как можно создать бегущую строку на javascript? Текст, который надо показывать предварительно
вводится пользователем и потому может быть любой длины.

Пока у меня имеется следующий костяк:



window.onload = function() {

  document.getElementById("button").onclick = function() {

    var value = document.getElementById("input").value;

    // код, который нужно дописать

  };
};

  Введите строку

  
  




    

Ответы

Ответ 1

document.getElementById("button").onclick = function() {
  var value = document.getElementById("input").value;
  document.getElementById('marquee').innerHTML = ''+ value +'';
};
#marquee {
    display: block;
    width: 100%;
    line-height: 50px;
    white-space: nowrap;
    color: red;
    overflow: hidden;
    box-sizing: border-box;
}
#marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(-100%, 0); }
    100% { transform: translate(0, 0); }
}

  Введите строку:

  
  




Ответ 2

Когда вводим, сначала строка печатается в поле, а после начинает туда-сюда бегать.



var line = '', 
speedPrint = 200, 
speedTicker = 20, 
i = 0, 
l = 0, 
back = false, 
ticker = document.getElementById('ticker'), 
input = document.getElementById('text'), 
end = function () {
    w = document.body.clientWidth;
    ticker.style.position = 'relative';
    if (!back && l < w) {
        l += 5;
        ticker.style.left = l + 'px';
    } else {
        if (0 === l || 0 > l) {
            l = 0;
            back = false;
            ticker.style.left = '0px';
        } else {
            back = true;
            l -= 5;
            ticker.style.left = l + 'px';
        }
    }
    setTimeout(end, speedTicker);
}, 
text = function () {
    if (!(line = input.value)) {
        input.focus();
        return;
    }
    setTimeout(run, 200);
}, 
run = function () {
    if (i < line.length) {
        i++;
        ticker.innerText = line.substring(0, i);
        setTimeout(run, speedPrint);
    } else {
        end();
    }
};




   Побежали