Rotate Through Text With A Typewriter Effect - Ticker Type Text

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.