Rotate Through Text With A Typewriter Effect - jQuery writeText

Rotate Through Text With A Typewriter Effect - jQuery writeText
File Size: 6.08 KB
Views Total: 214
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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>

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.js"></script>

5. 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
// writeText(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");

This awesome jQuery plugin is developed by 2dareis2do. For more Advanced Usages, please check the demo page or visit the official website.