Wavy Text Animation Library
A JavaScript Library which allows you to animate infinite words in an infinite loop in a modern wavy way!
Options
Usage
Below instructions are for Vanilla JS. For
npm package, please follow the instructions mentioned here.
Fetch the library from CDN
In order to use it, insert the following <script> tag in the <head> tag of your HTML document.
<script src="https://cdn.jsdelivr.net/gh/murtuzaalisurti/wavy@master/main.js"></script>
NOTE :- In order to fetch the latest version of the library, perform a hard reload (CTRL + SHIFT + R) in your browser to bypass the file stored in disk cache. If you don't do this, your browser will load an older version of the library from disk cache!
Invoke the function
- Invoke the below function with the required arguments as shown below in your javascript file! Let's understand these arguments which are passed to the function!
wavy.wavy(html_element, {words: ["word-1", "word-2", "word-n"]}, {color: 'font-color'});
-
The first argument you should pass is an html element in which you want to place the words! It's like a wrapper element!
-
Example for first argument:
wavy.wavy(document.querySelector(".text"), second_argument, third_argument);
-
The second argument you should pass is an object with a property of
wordsset to a value of anarraycontaining as many words as you want to display. There is no word limit. These words will be animated in an infinite loop! -
Example for second argument:
wavy.wavy(document.querySelector(".text"), {words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]}, third_argument);
-
The third argument (optional) you should pass is an object with an option to set the color of the
text. The color values can behex,rgb,hslor standardcss values. Deafult color isblack. -
Example for third argument:
wavy.wavy(document.querySelector(".text"), {words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]}, {color: "green"});
NOTE: The first two arguments are mandatory!
Demo
Try it on CodePen!
This library is hosted on jsdelivr CDN.
2 Sep 13, 2022
79 Dec 27, 2022
1 Apr 6, 2022
32 Dec 25, 2022
2.9k Jan 8, 2023
356 Dec 29, 2022
201 Dec 30, 2022
40 Dec 23, 2022
3.5k Dec 30, 2022