Apply Retro Typewriter Effect To Text – Typey.js

Category: Animation , Javascript , Text | January 22, 2024
Author:williamtroup
Views Total:36 views
Official Page:Go to website
Last Update:January 22, 2024
License:MIT

Preview:

Apply Retro Typewriter Effect To Text – Typey.js

Description:

Yet another text animation library that simulates typing or deleting text on the webpage.

With just a few lines of code, you can make text look like it is being typed out in real-time, character by character.

This can be a great way to grab users’ attention and add some flair to headings, captions, or any other text elements.

How to use it:

1. Get started by loading the main script typey.js in the document.

<script src="/dist/typey.min.js"></script>

2. Add the data-typey-options attribute to the text container and config the animation with the following parameters:

  • speed: Animation speed. Default: 100.
  • typingCharacter: Custom cursor displayed at the end of the text while being typed out. Default: “_”.
  • delete: Enable deleting animation. Default: false.
  • repeat: Whether to loop the animation. Default: false.
  • maximumRepeats: Max number of repeats. Default: null.
  • onBeforeRender: Callback function.
  • onRenderComplete: Callback function.
<div data-typey-options="{ 'speed': 100 }">
  <p>Text Here.</p>
</div>

You Might Be Interested In:


Leave a Reply