Animate The Page Title In The Browser Tab - titleEffect

titleEffect is a jQuery plugin to create impressive document titles that make it simple to animate the title text in the browser tab.

Animation types:

• Replace (default): switches between an array of title text.
• Blink: switches between an array of title text with fade in/out animations.
• Scroll: Scrolls through an array of title text so that the users are able to read the entire tab title.

See also:

• Browser Title Bar Notification Plugin with jQuery - Tabalert
• jQuery Plugin For Dynamic Page Title and Favicon - I Miss You
• Animate Page Title In Browser Tab – title-scroll.js
• Fancy Scrolling Document Title In JavaScript – marqueeTitle

How to use it:

1. Include the minified version of the jQuery titleEffect plugin after jQuery slim build.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous"></script>
<script src="dist/titleEffect.jquery.min.js"></script>

2. Initialize the plugin and define an array of document titles.

$(function(){
  $.titleEffect({
    titles: [
      'jQuery',
      'Script',
      'Net'
    ]
  });
});

3. Specify the delay in milliseconds. Default: 1000ms.

$(function(){
  $.titleEffect({
    delay: 2000,
    titles: [
      'jQuery',
      'Script',
      'Net'
    ]
  });
});

4. Fade through the document titles by using the 'blink' mode.

$(function(){
  $.titleEffect({
    effect: 'blink',
    titles: [
      'jQuery',
      'Script',
      'Net'
    ]
  });
});

5. Scroll through the document titles by using the 'scroll' mode.

$(function(){
  $.titleEffect({
    effect: 'scroll',
    separator: ',',
    titles: [
      'jQuery',
      'Script',
      'Net'
    ]
  });
});

---

This awesome jQuery plugin is developed by mahmudz. For more Advanced Usages, please check the demo page or visit the official website.