Marquee start in center to the left

Question

I am looking for a way to start the marquee (text slider) from the center to the left.

Because if I reload my page, marquee is blank.

Answer 1

Please note that marquee is obsolete in HTML5, and its events aren't well-supported.

That said, one way would be using text-indent, but it makes it scroll slightly shifted. To workaround that you could reduce its property slowly on a setInterval. See this fiddle, or run the following snippet:

var textIndentPercent = 50;
var marqueeCenteringInterval = setInterval(function() {
    console.log(document.getElementById('my-marquee'));
    console.log(textIndentPercent);
    console.log(document.getElementById('my-marquee').style.textIndent);
    document.getElementById('my-marquee').style.textIndent = -textIndentPercent + '%';
    textIndentPercent -= 0.1;
    if (textIndentPercent < 0) {
        document.getElementById('my-marquee').style.textIndent = '0px';
        clearInterval(marqueeCenteringInterval);
    }
}, 100);

<marquee id="my-marquee" style="">This is basic example of marquee</marquee>