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.

Default image
Lingaraj Senapati
Hey There! I am Lingaraj Senapati, the Co-founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.
Articles: 217

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply