Typer

The Typer component creates a typing animation effect that types out text, deletes it, and then types the next segment, with a blinking cursor. It’s perfect for creating dynamic, attention-grabbing text elements on your website.

Dependencies

This component has no additional dependencies beyond the core Metro UI library.

Usage

Basic Usage

<span data-role="typer">Metro UI, Impressive Components Library, First in Metro Style</span>

With Custom Colors

<span data-role="typer" data-colors="#ed426d,#6d67c6,#b74033">Metro UI, Impressive Components Library, First in Metro Style</span>

With Custom Typing Parameters

<span data-role="typer"
      data-splitter="|"
      data-delay="200"
      data-delete-delay="1000"
      data-cursor="|">
    First phrase|Second phrase|Third phrase
</span>

With Event Handler

<span data-role="typer" data-on-type="onType">Metro UI, Impressive Components Library, First in Metro Style</span>

<script>
    function onType({word, char}) {
        console.log(`Currently typing word ${word}, character ${char}`);
    }
</script>

Plugin Parameters

Parameter	Type	Default	Description
splitter	string	”,“	Character used to split the text into segments
variance	number	0	Randomness in typing speed (0 means consistent speed)
delay	number	100	Delay in milliseconds between typing characters
blinkDelay	number	400	Delay in milliseconds for cursor blink
deleteDelay	number	800	Delay in milliseconds before deleting text
loop	boolean	true	Whether to loop through the text segments
cursor	string	”_“	Character used for the cursor
colors	string	""	Comma-separated list of colors for text segments
onType	function	Metro.noop	Event handler called during typing
onTyperCreate	function	Metro.noop	Event handler called when the component is created

API Methods

• start() - Starts the typing animation.
• stop() - Stops the typing animation.
• destroy() - Removes the element from the DOM.

Example of Method Usage

const typer = Metro.getPlugin('#myTyper', 'typer');
typer.stop(); // Stop the typing animation
typer.start(); // Start the typing animation again

Events

Event	Description
onType	Triggered during typing with current word and character information
onTyperCreate	Triggered when the typer component is created

Styling with CSS Variables

This component doesn’t use CSS variables for styling. You can customize its appearance using the available CSS classes.

Available CSS Classes

Base Classes

• .typer - The main container class for the typer component
• .typer-text - Class for the text being typed
• .typer-cursor - Class for the blinking cursor

Example of Custom Styling

/* Custom styling example */
.typer {
    font-size: 24px;
    font-weight: bold;
}

.typer-cursor {
    color: #ff0000;
}

Additional Notes

The typer component can be used within any HTML element, not just span elements. For example, you can use it within heading elements for more prominent display:

<h1>
    <span>Welcome to</span>
    <span data-role="typer" data-colors="#ed426d,#6d67c6,#b74033">Metro UI, Impressive Components Library, First in Metro Style</span>
</h1>

Best Practices

• Use short, impactful phrases for better visual effect
• Consider using custom colors to match your website’s theme
• Adjust typing speed and delays based on the content length and desired effect
• For longer text segments, consider using a larger delay to give users time to read