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.
Please follow the documentation at wowfyjs.com
In the CDN installation selection, you have the choice between the Global or ES Module import methods.
The Global import method is as follows:
<html>
<head>
...
<script src="https://unpkg.com/wowfy/dist/wowfy.global.js"></script>
...
</head>
<body>
...
</body>
</html>
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.esm.js";
wowfyInit();
</script>
</body>
</html>
You can install Wowfy using package managers like npm, yarn, or pnpm.
npm install wowfy
yarn add wowfy
pnpm install wowfy
<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>
<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.