Animate The Page Title In The Browser Tab - titleEffect
File Size: | 5.37 KB |
---|---|
Views Total: | 4156 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.