Hello

About the Project

This project is a text rotator that displays random phrases or options in a fading animation. It allows you to create dynamic and engaging content on your website.

Project URL

https://github.com/compumaster/html-text-rotator

Features

• Supports multiple text rotators on the same page.
• Options can be customized and separated by the "|" character.
• Randomization of options can be enabled or disabled.
• Two animation modes: "fadeoutandreplace" and "fadeoutthenreplace".
• Customizable, randomizable sleep times between options.

Usage

To use the text rotator, simply add the "text-rotator" class to any HTML element and specify the options using the "data-options" attribute. You can also customize the animation mode, randomization, and sleep times using the respective data attributes.

Example

      <span class="text-rotator"
        data-options="Option 1|Option 2|Option 3"   /* Required. Specifies the options to be rotated. Options are separated by "|".                     */
        data-random="true"                          /* Optional. If set to "true", options will be displayed in a random order. Default is "false".     */
        data-mode="fadeoutandreplace"               /* Optional. Specifies the transition mode between options. Default is "fadeoutandreplace". Other option is "fadeoutthenreplace"  */
        data-rand-max-sleep="500"                   /* Optional. Specifies the maximum random delay in ms between option transitions. Default is "500". */
        data-baseline-sleep="2000"></span>          /* Optional. Specifies the baseline delay in ms between option transitions. Default is "2000".      */
        

Implementation

To implement the text rotator, include the necessary CSS and JavaScript files, as shown in the provided code. Then, initialize the text rotator by calling the "QubasTextRotatorTurbo" constructor for each element with the "text-rotator" class.