The js library which allows you to make your text more sassy in just a few lines of code.
You can find the main js file under the package/js or download zip file of the repository. You can also get to the raw file directly by clicking on this link.
Once you get hold of the textAmaze.js make sure to include the two other dependecies on your project before including textAmaze.js
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="textAmaze.js"></script>
var textAmaze = new textAmaze();
The config function takes three arguments:
- targetElement : The element whose text is to be animated.
- animationSettings : An object which defines the various animationSettings.
- styles : An object by which you could apply styles on the text within target element.
function config(targetElement, animationSettings[Object], styles[Object]){
...
}
//NOTE : make sure to use just the name of the class or id with the symbol and not $("#targetElement")
var targetElement = "#targetElement";
//animationNames come in from the animated.css, go check out that website and try
//to apply those animations here
var targetElement = "#targetElement";
var animationSettings =
{
"animationName":"bounceIn",
"time":"100",
}
var styles = {
"color":"blue",
"animationIterationCount":"infinite"
}
textAmaze.config(targetElement, animationSettings, styles);
Have a look at the demo working of this library. Click here
- Every letter thats inside the target element is converted into a block display, you have to explicity apply an inline-block property to the div's inside the targetElement
#targetElement div{
display:inline-block;
}
- To provide spaces between the words, use ' ' , as the inline-block property forces the div's to stick together.