Rotate Through Text With A Typewriter Effect - Ticker Type Text
File Size: | 20.9 KB |
---|---|
Views Total: | 2721 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Ticker Type Text (formerly known as writeText) is a simple, lightweight, and configurable text rotator plugin that rotates through a series of strings with typewriter-like typing and deleting effects.
Ideal for news tickers, testimonial carousels, quote rotators, and much more.
How to use it:
1. Create a series of sentenses you want to rotate through.
<div class="tt-holder"> <p class="tt">I LOVE JQUERYSCRIPT!</p> <p class="tt">I LOVE CSSSCRIPT!</p> <p class="tt">I LOVE VUESCRIPT!</p> <p class="tt">I LOVE REACTSCRIPT!</p> <h1 class="ttt"></h1> </div>
2. Hide the content on page load.
.tt { display: none; }
3. Append a blinking cursor to the end of the sentenses while typing & deleting characters.
.ttt::after { content : "\0020"; animation: pulse 1s infinite; color: transparent; border-right: 3px solid black; margin-left: 4px; } @keyframes pulse { 0% { border-right: 3px solid black; } 50% { border-right: 3px solid transparent; } 100% { border-right: 3px solid black; } }
4. Load the main JavaScript after jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/index.min.js"></script>
5. Use the Visibility API to check if the current tab is active or not.
const vis = (function () { let stateKey, eventKey, keys = { hidden: "visibilitychange", webkitHidden: "webkitvisibilitychange", mozHidden: "mozvisibilitychange", msHidden: "msvisibilitychange" }; for (stateKey in keys) { if (stateKey in document) { eventKey = keys[stateKey]; break; } } return function (c) { if (c) document.addEventListener(eventKey, c); return !document[stateKey]; } })();
6. Initialize the plugin and pass the following parameters to the writeText
method:
- contents: container that holds the content
- keep: number of characters to keep while typing & deleting
- seconds: animation speed in seconds
- delay: delay in milliseconds
- iterations: number of iterations, 0 = infinity
- ratio: inTransition & outTransition percent (0-1)
- secondsout: animation speed for the second part
- dev: enable dev mode
- pausetarget: element to pause the text rotator
- stoptarget: element to stop the text rotator
// tickerText(contents, keep, seconds, delay = 20, iterations = 0, ratio, secondsout, dev = false, pausetarget, stoptarget); let $elements = $(".tt-holder .tt"); $(".ttt").tickerText($elements, 8, 3, 30, 1, 0.5, 2, false, "timerpause", "timerstop");
Changelog:
2023-03-02
- v2.0.5
2023-02-17
- update
2021-08-27
- refactored slightly to use callback function with html()
v1.0.0 (2021-08-21)
- major rewite to support inline html elements
This awesome jQuery plugin is developed by 2dareis2do. For more Advanced Usages, please check the demo page or visit the official website.