Wowfy

Appearance

NOTICE

If you haven't read the installation tutorial yet, please go to the Installation.

Usage ​

Before we begin, let's provide a quick overview. Wowfy offers a variety of impressive effects to enhance your web projects. You can easily adjust how these effects appear by configuring options. Don't wait—let's quickly customize your own effects for a more appealing look!

In HTML tag ​

After Wowfy initialization, you can quickly configure effects within HTML tags.

Here are some concise guidelines:

  • All attributes related to Wowfy within HTML tags are prefixed with "w-".
  • All attributes should be kebab-cased.
  • Be sure to set the effect attribute.
  • Each effect attribute provides different options attributes; make sure not to use options attributes that are not provided by the specific effect.
  • Please do not set attributes repeatedly in HTML tags.

Example ​

Follow these steps to easily apply an effect.

First, choose your preferred effect, and add it to the target tag (in our example, we select the "ripple" effect).

html
<div w-ripple> 
  Wowfy
</div>
<div w-ripple> 
  Wowfy
</div>

Next, set the options attributes related to the 'ripple' effect (you can find more details in the Ripple options).

html
<div 
  w-ripple
  w-duration="1s" 
  w-background="#fa0" 
>
  Wowfy
</div>
<div 
  w-ripple
  w-duration="1s" 
  w-background="#fa0" 
>
  Wowfy
</div>

The default value of options attribute

Every options attribute has default values. If you don't set the attributes, the default settings will be applied.

In JavaScript ​

Using JavaScript to configure effect provides you with the flexibility to customize styles and create more intricate visual effects.

You can use the Wowfy class to bind HTML element and configure effect. The Wowfy constructor takes three arguments: the first one is the target HTML element, the second one is the target element's effect, and the third one is the effect's options. As shown in the example below:

js
const wowfy = new Wowfy(/* element */, /* effect */, /* options */);
const wowfy = new Wowfy(/* element */, /* effect */, /* options */);

Example ​

If you are using the Global import method, you can directly use the Wowfy class within the script tag.

NOTICE

It's important to note that when specifying attributes inside the third argument (options), you should use the camelCase naming convention for those attributes.

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>
<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>

If you are using the ES Module import method, please import the Wowfy class, as shown in line 20.

html
<html>
  <head>
    ...
    <script type="importmap"> 
      { 
        "imports": { 
          "wowfy": "https://unpkg.com/wowfy/dist/wowfy.mjs" 
        } 
      } 
    </script> 
    ...
  </head>
  <body>
    ...
    <div class="btn">
      Wowfy
    </div>
    ...
    <script type="module">
      import { Wowfy } from "wowfy"; 

      const btn = document.querySelector(".btn"); 
      const wow = new Wowfy(btn, "ripple", { 
        duration: "1s", 
        background: "#fffa", 
      }); 
    </script>
  </body>
</html>
<html>
  <head>
    ...
    <script type="importmap"> 
      { 
        "imports": { 
          "wowfy": "https://unpkg.com/wowfy/dist/wowfy.mjs" 
        } 
      } 
    </script> 
    ...
  </head>
  <body>
    ...
    <div class="btn">
      Wowfy
    </div>
    ...
    <script type="module">
      import { Wowfy } from "wowfy"; 

      const btn = document.querySelector(".btn"); 
      const wow = new Wowfy(btn, "ripple", { 
        duration: "1s", 
        background: "#fffa", 
      }); 
    </script>
  </body>
</html>

In Vue SFC ​

INFO

The following examples are all used within Vue 3 Composition API.

You can import the required functions or classes in SFC (Single File Component) as shown in the 7th line after installing Wowfy using a package manager.

vue
<template>
...
</template>

<script setup>
import { onMounted } from 'vue';
import { Wowfy, wowfyInit } from "wowfy"; 
...
</script>

<style scoped>
... 
</style>
<template>
...
</template>

<script setup>
import { onMounted } from 'vue';
import { Wowfy, wowfyInit } from "wowfy"; 
...
</script>

<style scoped>
... 
</style>

Next, whether you want to set up an effect using an HTML tag or JavaScript, you must wait until the DOM tree is fully created before you can operate on it. Therefore, any configuration for Wowfy needs to be done within the Vue 3 Composition's onMounted() function.

If you want to use it within an HTML tag, please call wowfyInit() within onMounted(). Please refer to the following lines 14-15.

vue
<template>
  <div  
    w-ripple 
    w-duration="1s" 
    w-background="#fa0" 
  > 
    Wowfy 
  </div> 
</template>

<script setup>
import { onMounted } from 'vue'; 
import { wowfyInit } from "wowfy"; 

onMounted(() => { 
  wowfyInit(); 
}); 
...
</script>

<style scoped>
... 
</style>
<template>
  <div  
    w-ripple 
    w-duration="1s" 
    w-background="#fa0" 
  > 
    Wowfy 
  </div> 
</template>

<script setup>
import { onMounted } from 'vue'; 
import { wowfyInit } from "wowfy"; 

onMounted(() => { 
  wowfyInit(); 
}); 
...
</script>

<style scoped>
... 
</style>

If you want to operate through JavaScript, it is recommended to obtain the DOM element instance using Vue 3 template refs after it's mounted, and then create a Wowfy instance and set the arguments. Please refer to the following example:

vue
<template>
  <div ref="btnRef"> 
    Wowfy 
  </div> 
</template>

<script setup>
import { ref, onMounted } from 'vue'; 
import { Wowfy } from "wowfy"; 

const btnRef = ref(null); 

onMounted(() => { 
  const wow = new Wowfy(btnRef.value, "ripple", { 
    duration: "1s", 
    background: "#fffa", 
  }); 
}); 
...
</script>

<style scoped>
... 
</style>
<template>
  <div ref="btnRef"> 
    Wowfy 
  </div> 
</template>

<script setup>
import { ref, onMounted } from 'vue'; 
import { Wowfy } from "wowfy"; 

const btnRef = ref(null); 

onMounted(() => { 
  const wow = new Wowfy(btnRef.value, "ripple", { 
    duration: "1s", 
    background: "#fffa", 
  }); 
}); 
...
</script>

<style scoped>
... 
</style>

WARNING

If you want to add effects to a component, please make sure to use the $el property to obtain the root DOM node of the component, just like in the usage example in line 12 below.

vue
<template>
  <MyComponent ref="myComponentRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Wowfy } from "wowfy";

const myComponentRef = ref(null);

onMounted(() => {
  const wow = new Wowfy(myComponentRef.value.$el, "ripple", { 
    duration: "1s",
    background: "#fffa",
  });
});
...
</script>

<style scoped>
... 
</style>
<template>
  <MyComponent ref="myComponentRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Wowfy } from "wowfy";

const myComponentRef = ref(null);

onMounted(() => {
  const wow = new Wowfy(myComponentRef.value.$el, "ripple", { 
    duration: "1s",
    background: "#fffa",
  });
});
...
</script>

<style scoped>
... 
</style>

Released under the MIT License.

Copyright © 2023-PRESENT Wujue