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

CDN

<script src="https://cdn.jsdelivr.net/npm/titleeffect-jquery@1.0.2/dist/titleEffect.jquery.min.js"></script>

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.

How to use it:

1. Include the plugin titleEffect plugin after jQuery.

   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/titleeffect-jquery@1.0.2/dist/titleEffect.jquery.min.js"></script>

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

   $(function(){
     $.titleEffect({
       titles: [
           'How: This is my first title',
           'Cool: This is my second title',
           'Is: This is my third title',
           'That!: This is my fourth title'
       ]
     });
   });

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

       $(function(){
         $.titleEffect({
           delay: 1000,
           titles: [
               'How: This is my first title',
               'Cool: This is my second title',
               'Is: This is my third title',
               'That!: This is my fourth title'
           ]
         });
       });

Options

• effect - Determines which effect you want
• delay - The amount to delay time of animation in miliseconds
• titles - Set of document titles
• separator - Separator among the titles

Fade through the document titles by using the 'replace' mode.

    $(function(){
      $.titleEffect({
        effect: 'replace',
        titles: [
            'How: This is my first title',
            'Cool: This is my second title',
            'Is: This is my third title',
            'That!: This is my fourth title'
        ]
      });
    });

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

    $(function(){
      $.titleEffect({
        effect: 'scroll',
        separator:',',
        titles: [
            'How: This is my first title',
            'Cool: This is my second title',
            'Is: This is my third title',
            'That!: This is my fourth title'
        ]
      });
    });

Blink the document titles by using the 'blink' mode.

    $(function(){
      $.titleEffect({
        effect: 'blink',
        titles: [
            'How: This is my first title',
            'Cool: This is my second title',
            'Is: This is my third title',
            'That!: This is my fourth title'
        ]
      });
    });