A (Subtle) Scrolling <title> Tag

I’m positive you’ve seen it browsing neocities. I know I did. Those sites with animated <title> tags. You visit them, and the title scrolls through the tab on your browser. Very neat, and often quite beautiful when some special characters are included.

I avoided including this feature in my site for quite some time. Many people told me never to include it, especially on Reddit. I was told it was annoying and distracting, especially when your visitors are in another tab. I thought about this a bit, and found a workaround - namely, a marquee that only moves when the visitor is actively focused on your website’s tab, and which defaults back to a static title when the visitor click’s away.

I shuffled through Reddit and other sites. In some marquee <title> versions, it also apparently includes a method of determining if the user prefers no motion according to their accessibility settings in the browser, but I’m not sure how that works yet. Initially, I found a script that did the exact opposite of this. Because people wanted to be “eye-catching” and draw people back to their sites from other tabs, I guess.

I doubt that works, and I still think this method is more gentle and inviting to the visitor. Some folks did, as I said, tell me to never animate the <title> tag because they found it irritating. I, however, see this as having some functionality now. A lot of my page titles are rather long, and may not fit within a browser tab legibly. If they slowly, slowly scroll (and speed is controllable), then the visitor can see the entire page title while browsing.

Anyways, I would love to provide a link to Code Pen demonstrating this as I’ve done with other trinkets, but since Code Pen itself only executes material between the <body> tags, and won’t let you use Javascript to fiddle with <title>, I can’t. Instead, I’m sharing the Javascript below, and you can easily see how the script functions on this very site - just look at the title…

Please note that this may cause issues with how the site’s title is displayed other places, ie, when it appears as a link on social media. I saw this happen once, and only once. It is a mystery to me, as the dabblesome beginner that I am.

Trinket Itself

//this script animates the title tag of your document. it also will cease to scroll if the user clicks away from your site into another window. this ensures that your users won't be bothered by your marquee title when browsing other sites, and keeps things lowkey. this is like a frankenstein code but if it works, it works.

    const lespeed = 400; //pls set the speed at which the marquee scrolls in milliseconds. lower = faster
    const origtitle = document.title; //store the original title as a constant because it doesn't change
    let letitle = document.title + " - "; //between those quotation marks is the character that separates each round of the marquee. a dash works well but you can easily pick something else or delete it entirely by removing the quotations etc. just don't remove the document.title part.
    let letimer;
    function scrollstart() {
        if (!letimer) {
            letimer = setInterval(() => {
                document.title = letitle = letitle.substring(1) + letitle.substring(0, 1); //starts a process where it rewrites the content of letitle letter by letter, over and over and over lol.
            }, lespeed); 
        }
    }

    function scrollhalt() { 
        clearInterval(letimer);  // empty the timer that tracks the animating speed so that the animation stops
        letimer = null; //the timer can also begin anew when the user clicks on your site again.
        document.title = origtitle; //returns the title to its original state when the user clicks away, too!
    }

    //the important stuff that pulls it all together. this part is checking to see if your site is the tab the user is viewing...
    document.addEventListener("visibilitychange", () => {
        if (document.visibilityState === "visible") {
            scrollstart(); //calls function that starts the marquee once more when the user clicks on your tab, making your site visible to them.
        } else {
            scrollhalt(); //calls function that halts marquee when tab is not visible
        }
    });
    if (document.visibilityState === "visible") {
        scrollstart();  //starts the marquee 
    }
    //i guess if it works, it's not stupid.