Text Rotators

Display interactive Text Rotators within your Content or Headings to attract User Attention.

Usage

<h1>
	<span class="text-rotater" data-separator="|" data-rotate="fadeInLeft" data-speed="6000">
		<span class="t-rotate font-weight-bold font-body">canvas.|different.|onepage.|digital.</span>
	</span>
</h1>

Settings

Setting	Description
`data-rotate`	The Rotation Style of the Text Rotator Example: `fadeInLeft`
`data-speed`	Speed of the Rotation Animation in milliseconds. Example: `1200`
`data-separator`	Separator between the Text Rotation words Example: `\|`
`data-typed`	Enables Typing Animation for the Text Rotator Example: `true` If Typing Animation is enabled, `data-rotate` will not work and `data-speed` values will be different
`data-speed`	Speed of the Typing Animation in milliseconds Example: `50` Use this only when `data-typed="true"` is applied
`data-backspeed`	Speed of the Backspacing Animation in milliseconds Example: `30` Use this only when `data-typed="true"` is applied
`data-backdelay`	Duration of the Delay before Backspacing starts in milliseconds Example: `1200` Use this only when `data-typed="true"` is applied
`data-loop`	Enable/Disable Animations Loop Example: `true` Use this only when `data-typed="true"` is applied
`data-shuffle`	Enable/Disable Shuffle Example: `true` Use this only when `data-typed="true"` is applied
`data-cursor`	Enable/Disable Typing Cursor Example: `true` Use this only when `data-typed="true"` is applied

Examples

<span class="text-rotater" data-separator="|" data-speed="50" data-backdelay="1500" data-typed="true" data-shuffle="true" data-loop="true">
	<span class="t-rotate text-uppercase">Corporate|Portfolio|Business|Real Estate|Medical|Construction|Store</span>
</span>