Rotate Through Text With A Typewriter Effect – jQuery writeText

Here JQuery 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 configure in the website?

Step-1 Create a series of sentences 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>

Step-2: Hide the content on page load.

.tt {
  display: none;
}

Step-3: Append a blinking cursor to the end of the sentences 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;
  }
}

Step-4: Load the main JavaScript after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/index.js"></script>

Step-5: Initialize the plugin and pass the following parameters to the writeText method:

• contents: a 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: the element to pause the text rotator
• stoptarget: the 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");

Please comment and share this article if you find it helpful and wants to improve this article please WhatsApp us.