wowfy

v0.2.5

Published

5 months ago

An awesome and easy-to-use JavaScript animation library.

Downloads

0High
0Medium
0Low

wujue0115

wowfy wowfyjs javascript library animation ripple

wowfy.js

Wowfy is a JavaScript animation library for applying a wide range of fascinating, amazing, and eye-catching effects, enhancing the visual appeal of your web projects. It is implemented using JavaScript to create various magical CSS effects and offers user-friendly options for adjusting the effects.

Demo

Ripple Demo

Documentation

Please follow the documentation at wowfyjs.com

Installation

Installing from CDN

In the CDN installation selection, you have the choice between the Global or ES Module import methods.

Using the Global Build

The Global import method is as follows:

<html>
  <head>
    ...
    <script src="https://unpkg.com/wowfy/dist/wowfy.global.js"></script>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Using the ES Module Build

The ES Module import method requires setting type="module" inside the script tag and using "import" to import the functions or classes you want to use.

The ES Module import method is as follows:

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script type="module">
      import { wowfyInit } from "https://unpkg.com/wowfy/dist/wowfy.mjs";

      wowfyInit();
    </script>
  </body>
</html>

Installing from NPM

You can install Wowfy using package managers like npm, yarn, or pnpm.

npm

npm install wowfy

yarn

yarn add wowfy

pnpm

pnpm install wowfy

Usage

In HTML tag

<html>
  <head>
    ...
    <script src="https://unpkg.com/wowfy/dist/wowfy.global.js"></script>
    ...
  </head>
  <body>
    <div 
      w-ripple
      w-duration="1s"
      w-background="#fff"
    >
      Click
    </div>
  </body>
</html>

In JavaScript

<html>
  <head>
    ...
    <script src="https://unpkg.com/wowfy/dist/wowfy.global.js"></script>
    ...
  </head>
  <body>
    ...
    <div class="btn">
      Wowfy
    </div>
    ...
    <script>
      const btn = document.querySelector(".btn");
      const wow = new Wowfy(btn, "ripple", {
        duration: "1s",
        background: "#fffa",
      });
    </script>
  </body>
</html>

For more usage, please refer to the documentation.

License

MIT