TitleEffect is a jQuery plugin to create impressive document titles that make it simple to animate the title text in the browser tab.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/titleEffect.jquery.min.js"></script>- 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.
-
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/[email protected]/dist/titleEffect.jquery.min.js"></script>
-
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' ] }); });
-
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' ] }); });
- 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
$(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'
]
});
}); $(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'
]
});
}); $(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'
]
});
});