How do I make text inside the title tag animate using JavaScript?

Question

How do I show a scrolling (moving) message in the title?

Translate the titlebar into a dy

Answer 1

You can add marque in the title bar text through JavaScript. See it in the blog post Add Scrolling Marquee Effects Text to Title Bar.

The unmodified contents of that page, except for the formatting:

/*
    Now you can add moving text to title bar of browser for your website or blog.
    Here is the code to do this. Add this code in your website or blog in a widget
    (after replacing YOUR TEXT with your desired text).
*/

<script language=javascript>
    var rev = "fwd";
    function titlebar(val){
        var msg  = "YOUR TEXT";
        var res = " ";
        var speed = 100;
        var pos = val;
        msg = "   |-"+msg+"-|";
        var le = msg.length;
        if(rev == "fwd"){
            if(pos < le){
                pos = pos+1;
                scroll = msg.substr(0,pos);
                document.title = scroll;
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
            else {
                rev = "bwd";
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
        }
        else {
            if(pos > 0) {
                pos = pos-1;
                var ale = le-pos;
                scrol = msg.substr(ale,le);
                document.title = scrol;
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
            else {
                rev = "fwd";
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
        }
    }
    titlebar(0);
</script>

Answer 2

Here's another one. Only goes forward though... To use: Link to the file and write this line of code

var title = new MovingTitle("Desired title... ", 300, 10);
title.init();

First parameter is the desired text, next one is the update interval, 10 is the number of visible letters...

function MovingTitle(writeText, interval, visibleLetters) {
    var _instance = {};

    var _currId = 0;
    var _numberOfLetters = writeText.length;

    function updateTitle() {
        _currId += 1;
        if(_currId > _numberOfLetters - 1) {
            _currId = 0; 
        }

        var startId = _currId;
        var endId = startId + visibleLetters;
        var finalText;
        if(endId < _numberOfLetters - 1) {
            finalText = writeText.substring(startId, endId);
        } else {
            var cappedEndId = _numberOfLetters;
            endId = endId - cappedEndId;

            finalText = writeText.substring(startId, cappedEndId) +     writeText.substring(0, endId);
        }

        document.title = finalText; 
    }

    _instance.init = function() {
        setInterval(updateTitle, interval);
    };

    return _instance;
}

Answer 3

Here's an eye catching example to get your visitors back when your web page tab is not active within the browser (onblur). This script will animate the original title text with an intro, the original title text is restored when the tab is returned to active state (focus). When the tab is clicked the original page title is restored. For social media sharing it is highly recommended to include the original page title text with the prefaced animated text (onblur).

$(function() {

var origTitle, animatedTitle, timer;

function animateTitle(newTitle) {
  var currentState = false;
  origTitle = document.title;  // save original title
  animatedTitle = "Hey There! " + origTitle;
  timer = setInterval(startAnimation, 2000);

  function startAnimation() {
    // animate between the original and the new title
    document.title = currentState ? origTitle : animatedTitle;
    currentState = !currentState;
  }
}

function restoreTitle() {
  clearInterval(timer);
  document.title = origTitle; // restore original title
}

// Change page title on blur
$(window).blur(function() {
    animateTitle();
});

// Change page title back on focus
$(window).focus(function() {
    restoreTitle();
});

});