README

Text Rotater

A small library for displaying a group of text in a rotating way.

Demo:

demo ;

Example:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        body{
            background-color: cornflowerblue;
            font-weight: 900;
            font-size: 3rem;
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            justify-content: center;
        }
        p{
            text-align: center;
        }
    </style>
    <p>I am a <br/> <span id="text-rotater" data-rotate="Web developer, Desktop developer, Genius, Writer"></span></p>
    <script src="./text-rotater/index.js"></script>
    <script>
        new TextRotater("text-rotater",{background:"#000",color:"yellow",duration: 2500, direction: "top"}).init();
    </script>
</body>

</html>

Documentation

installation:

using npm:

npm i text-rotater

or copy the code on index.js

linking

using module:

import TextRotater from "text-rotater";

or:

<script src="./text-rotater/index.js"></script>

After installing/downloading you need to have an html element with an id of text-rotater then pass to that element a data-rotate with multiple words separated by commas as values:

<span id="text-rotater" data-rotate="Web developer, Desktop developer, Genius, Writer"></span>

Initialize the function to display words by including the following:

new TextRotater("text-rotater").init();

See below on options

options

Option name	Description	Default
background	changes the background color	initial
color	changes the color of the text	initial
duration	the duration of the animation in milliseconds	3000
direction	Whether animation should go up or down, option values are top bottom	top

Usage no npm install needed!