;
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>npm i text-rotateror copy the code on index.js
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
| 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 |