1. [init-fx] – Trigger Effects Based on Interaction
This shortcode lets you add effects to text (or buttons, links, etc.). When users interact via click, hover, or when the element enters the viewport, the effect is triggered. Perfect for highlights like “🎉 Congrats!”, “❤️ Big Like”, and more.
Syntax
[init-fx text="Congrats!" fx="firework"]Supported Parameters
| Parameter | Default | Description |
|---|---|---|
text |
(required) | The visible content |
fx |
(required) | Name of the effect (firework, emojiRain, heartRain, etc.) |
emoji |
'' |
Used with fx = emojiRain, defines the emoji to display (e.g., 😂, 💖) |
shoot |
click |
When to trigger the effect. Options:
|
tag |
a |
HTML tag wrapping the content: a, span, button, etc. |
Examples
Firework effect on button click
[init-fx text="Congrats!" fx="firework" tag="button"]Emoji rain on hover
[init-fx text="Haha!" fx="emojiRain" emoji="😂" shoot="hover"]Trigger on page load
[init-fx text="Hello!" fx="emojiRain" emoji="👋" shoot="immediate"]Trigger when scrolled into view
[init-fx text="Here we go!" fx="firework" shoot="in-view"]2. [init-fx-ambient] – Animated Background Effects
This shortcode inserts animated background effects like particles (moving dots, connections, mouse interaction). Ideal for banners, headers, or featured blocks to create strong visual appeal.
Basic Syntax
[init-fx-ambient ambient="hero"]Detailed Parameters
| Parameter | Default | Description |
|---|---|---|
ambient |
(required) | Effect identifier (you choose the name) |
color |
#ffffff | Color of particles and connecting lines |
lines |
true | Enable/disable connecting lines between particles |
speed |
3 | Particle movement speed |
hover |
repulse | Mouse interaction: grab, bubble, repulse, none |
click |
push | Click effect: push, remove, repulse, none |
container_style |
preset | Inline style for the container |
container_class |
” | CSS class if styling via external file |
Advanced Examples
Light blue particle effect
[init-fx-ambient ambient="section-1" color="#00ccff" speed="2"]No connecting lines – clean effect
[init-fx-ambient ambient="light" lines="false"]Effect inside a small block
[init-fx-ambient ambient="mini-box" container_style="width: 300px; height: 200px; position: relative; z-index: 0;"]Using custom CSS class
[init-fx-ambient ambient="banner" container_class="fx-banner"]And define in your CSS:
.fx-banner {
width: 100%;
height: 400px;
position: relative;
pointer-events: none;
z-index: 0;
}3. Auto Formatting with Special Symbols
The plugin also supports automatic formatting of text using simple symbols, which helps you highlight parts of content without manually writing HTML.
Supported Symbol Table
| Symbol | Corresponding HTML | Effect |
|---|---|---|
*content* |
<strong> |
Bold |
`content` |
<em> |
Italic |
~content~ |
<del> |
Strikethrough |
^content^ |
<mark> |
Highlight |
_content_ |
<span class="init-fx-highlight-text"> |
Neon underline effect |
Real Example
Write this in your post:
*Bold* ~cancelled~ `note` ^highlight^ _neon effect_It will automatically render as:
- Bold
cancelled- note
- highlight
- neon effect
Notes
- This function applies automatically after content is rendered.
- It does not work inside
<script>,<style>,<pre>, or<a>tags.
Conclusion
The two shortcodes [init-fx] and [init-fx-ambient] are powerful tools that allow you to add interactive and animated effects to your site without writing complex JavaScript. Whether you’re a blogger, developer, or community admin – just a few lines of shortcode can help you create a more engaging and lively user experience.
Comments