Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/murtuzaalisurti/wavy
A javascript library to generate animated wavy text!
https://github.com/murtuzaalisurti/wavy
animation hacktoberfest hacktoberfest2023 javascript javascript-library text-animation
Last synced: 5 days ago
JSON representation
A javascript library to generate animated wavy text!
- Host: GitHub
- URL: https://github.com/murtuzaalisurti/wavy
- Owner: murtuzaalisurti
- Created: 2022-02-01T13:03:40.000Z (almost 3 years ago)
- Default Branch: package
- Last Pushed: 2022-08-28T07:05:43.000Z (about 2 years ago)
- Last Synced: 2024-10-30T14:19:50.881Z (15 days ago)
- Topics: animation, hacktoberfest, hacktoberfest2023, javascript, javascript-library, text-animation
- Language: JavaScript
- Homepage: https://murtuzaalisurti.github.io/wavy/
- Size: 26.4 KB
- Stars: 15
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wavy Text Animation Library
A JavaScript Library which allows you to animate infinite words in an infinite loop in a modern wavy way!
[](https://www.npmjs.com/package/@murtuzaalisurti/wavy)
[](https://github.com/murtuzaalisurti/wavy/releases)
[](https://openbase.com/js/@murtuzaalisurti/wavy?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
## Options
- [JS library for Browser](#for-browsers---usage)
- [NPM package](#npm-package---usage)
---
## NPM package - Usage
### - Install the package
```bash
npm i @murtuzaalisurti/wavy
```
### - Import the package
```js
const { wavy } = require('@murtuzaalisurti/wavy');
```
OR
```js
import { wavy } from '@murtuzaalisurti/wavy';
```
### - 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!
```js
wavy(
html_element, // example : document.querySelector('.text')
{
words: ["word-1", "word-2", "word-n"]
},
{
color: 'font-color', // hsl, rgb, hex, rgba, css standard values
fontSize: 'font-size', // any valid unit
fontFamily: 'font-family', // any valid font family
transform: 'scale(x)' // example : scale(1.5)
}
);
```
- 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:
```js
wavy(document.querySelector(".text"), second_argument, third_argument);
```
- The **second argument** you should pass is an object with a property of `words` set to a value of an `array` containing 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:
```js
wavy(document.querySelector(".text"), {words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]}, third_argument);
```
- The **third argument** you should pass is an object with some options to set the color, fontSize, fontFamily and scale properties of the `text`. Here are all the properties that you can modify:
```js
//these are default values
{
color: 'black', // you can also use rgb, hsl, rgba, hex
fontSize: '1rem',
fontFamily: 'sans-serif',
transform: scale(1.5)
}
```
- Example for third argument:
```js
wavy(
document.querySelector(".text"),
{
words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]
},
{
color: 'green',
fontSize: '2rem',
fontFamily: 'Poppins, sans-serif',
transform: 'scale(1.8)'
}
);
```
> *NOTE: The first two arguments are mandatory!
---
## For Browsers - Usage
> For `npm package`, please follow the instructions mentioned [here](#npm-package---usage).
### - Fetch the library from CDN
In order to use it, insert the following `` tag in the `<head>` tag of your HTML document.
```html
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@murtuzaalisurti/wavy/production.min.js">
```
> 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!
OR
```html
```
---
### - Invoke 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!
```js
wavy(
html_element, // example : document.querySelector('.text')
{
words: ["word-1", "word-2", "word-n"]
},
{
color: 'font-color', // hsl, rgb, hex, rgba, css standard values
fontSize: 'font-size', // any valid unit
fontFamily: 'font-family', // any valid font family
transform: 'scale(x)' // example : scale(1.5)
}
);
```
- 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:
```js
wavy(document.querySelector(".text"), second_argument, third_argument);
```
- The **second argument** you should pass is an object with a property of `words` set to a value of an `array` containing 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:
```js
wavy(document.querySelector(".text"), {words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]}, third_argument);
```
- The **third argument** you should pass is an object with some options to set the color, fontSize, fontFamily and scale properties of the `text`. Here are all the properties that you can modify:
```js
//these are default values
{
color: 'black', // you can also use rgb, hsl, rgba, hex
fontSize: '1rem',
fontFamily: 'sans-serif',
transform: scale(1.5)
}
```
- Example for third argument:
```js
wavy(
document.querySelector(".text"),
{
words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]
},
{
color: 'green',
fontSize: '2rem',
fontFamily: 'Poppins, sans-serif',
transform: 'scale(1.8)'
}
);
```
> **NOTE: The first two arguments are mandatory!**
---
### Demo
> Try it on [CodePen](https://codepen.io/seekertruth/pen/ExmGJjE)!