Simply wave
Overview
A simple JavaScript package that allows you to add wave effects to your texts and titles in the easiest way possible
Installation
npm install simply_wave
Demo
See the demo and test simply wave
Features
- wave effects
- wave mirror effects
Usage ( Classic )
Basic
HTML
<p id="wave">This text wave<p>
JavaScript
import { wave } from "../node_modules/simply_wave/index.js"
const waveOptions = {
target: "wave",
animationDelay: 200,
letterDelay: 20,
easing: "linear"
}
wave(waveOptions)
React
HTML
<p id="wave">This text wave<p>
JavaScript
import { wave } from "simply_wave"
const waveOptions = {
target: "wave",
animationDelay: 200,
letterDelay: 20,
easing: "linear"
}
wave(waveOptions)
Vue
HTML
<p id="wave">This text wave<p>
JavaScript
import { wave } from "simply_wave"
export default {
name: "MyComponent",
mounted() {
const waveOptions = {
target: "wave",
animationDelay: 200,
letterDelay: 20,
easing: "linear"
}
wave(waveOptions)
}
}
Options
Required
Parameter | Type | Description | Units |
---|---|---|---|
target |
string |
Your target | HTML id |
Optional
Parameter | Type | Description | Value |
---|---|---|---|
transform |
string |
value of the letter movement | em, rem, px, % |
duration |
number |
animation duration for each letters | ms |
animationDelay |
number |
time before animation start | ms |
letterDelay |
number |
letter delay for each letters | ms |
easing |
string |
like timing function in CSS | ease-in / ease-out / ease-in-out / linear / cubic-bezier |
iterations |
number / string |
number of animation repetitions | string = Infinity / number = 0 - ∞ |
fill |
string |
how the animation finish | both / forwards / backwards / none |
direction |
string |
direction of the animation | reverse / alternate / alternate-reverse / normal |
opacity |
boolean |
if the letter comme with a fade | boolean |
overflow |
boolean |
if the letters appear | boolean |
mirror |
boolean |
add mirror effect | boolean |
mirrorStyle |
boolean |
add second effect to mirror animation | boolean |
Usage ( Mirror )
Information
We strongly recommande to use mirror effects with overflow
set to false
and opacity
set to true
for a better visual (like the gif).
Possibilities
classic
const waveOptions = {
target: "wave",
transform: "100%",
mirror: true,
mirrorStyle: false
}
rotation
const waveOptions = {
target: "wave",
transform: "-100%",
mirror: true,
mirrorStyle: false
}
overlap
const waveOptions = {
target: "wave",
transform: "100%",
mirror: true,
mirrorStyle: true
}
reverse wave
const waveOptions = {
target: "wave",
transform: "-100%",
mirror: true,
mirrorStyle: true
}
Used By
- Neza agency - www.neza.fr
Author
Gabriel Voissiere