Press "Enter" to skip to content

A Typewriter or News Feed and Iteration Through a Set of HTML

Ticker Type Text is a jQuery Plugin designed to mimic a typewriter or news feed. I searched for one but never found one that did exactly what I wanted so I decided to create this one. writeText is a simple, lightweight, and configurable rotating text extension that cycles through a series of strings with write and delete effects.

typing and erasing animation css, typewriter effect, jquery typewriter effect, jquery typing animation multiple lines, typewriter effect with alternating text

How to make use of it:

1. Create a series of sentences you need to rotate by way of.

<div class="tt-holder">
  <p class="tt"> News Feed Typewriter</p>
  <p class="tt">Add text here</p>
  <p class="tt">Add text here</p>
  <p class="tt">Add text here</p>
  <h1 class="ttt"></h1>
</div>

2. Hide the content material on web page load.

.tt {
  display: none;
}

3. Append a blinking cursor to the end of the sentences whereas 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 principle JavaScript after the jQuery library.

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

5. Initialize the plugin and move the next parameters to the writeText technique:

// 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");

Parameters

 

contents

A HTML collection or array object.

keep

Integer determining the number of text chars to keep between iterations e.g. 16

seconds

Integer determining the number of seconds the animation will take. e.g 5

speed

Integer of delay between inserting text items in milliseconds defaults to 20

iterations

Integer for determining the number of iterations for the entire collection. 0 denotes infinite.

ratio

Float determining the relative value between when the animation starts and when it ends. This is usually weighted to prevent a large time delay at the end while also ensuring that there is not a gap between lines. e.g. 0.8

secondsout

When using the keep feature (see above), when set, this parameter allows configuration over the speed of second and subsequent frames. This can be higher or lower than that of the first frame.

dev

boolean – useful for seeing timings for tuning

pausetarget

a string that is passed element to target for trigger e.g. html5 button

stoptarget

a string that is passed element to target for trigger e.g. html5 button

Rotate Through Text With A Typewriter Effect, Ticker Type Text Plugin/Github, text animation jquery plugin, javascript typewriter effect, text slider animation jquery

See Demo And Download

Official Website(2dareis2do): Click Here

This superior jQuery/javascript plugin is developed by 2dareis2do. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *