simply_wave v1.1.10

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

Optional

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