1. Shortcode [init-fx] – Kích hoạt hiệu ứng theo hành vi

Shortcode này cho phép bạn chèn một đoạn văn bản (hoặc nút, link…) có gắn hiệu ứng. Khi người dùng tương tác như click, hover, hoặc khi phần tử cuộn vào màn hình, hiệu ứng sẽ được kích hoạt. Phù hợp để tạo điểm nhấn như “🎉 Chúc mừng!”, “❤️ Like mạnh”, v.v…

Cú pháp

[init-fx text="Chúc mừng!" fx="firework"]

Tham số hỗ trợ

Tham số	Giá trị mặc định	Giải thích
text	(bắt buộc)	Nội dung hiển thị ra ngoài
fx	(bắt buộc)	Tên hiệu ứng (firework, emojiRain, heartRain, v.v.)
emoji	''	Dùng với fx = emojiRain, cho biết emoji muốn bay ra (ví dụ: 😂, 💖)
shoot	click	Hành động kích hoạt hiệu ứng. Hỗ trợ các giá trị: click – Kích hoạt khi người dùng nhấn vào hover – Kích hoạt khi rê chuột qua immediate – Kích hoạt ngay khi trang tải in-view – Kích hoạt khi phần tử cuộn vào vùng hiển thị (viewport)
tag	a	Thẻ HTML bao ngoài nội dung: a, span, button, v.v.

Ví dụ sử dụng

Hiệu ứng pháo hoa khi nhấn nút

[init-fx text="Chúc mừng!" fx="firework" tag="button"]

Emoji rơi khi hover

[init-fx text="Haha!" fx="emojiRain" emoji="😂" shoot="hover"]

Chạy hiệu ứng khi vừa tải trang

[init-fx text="Xin chào!" fx="emojiRain" emoji="👋" shoot="immediate"]

Chạy hiệu ứng khi phần tử cuộn vào vùng hiển thị

[init-fx text="Tới rồi đây!" fx="firework" shoot="in-view"]

2. Shortcode [init-fx-ambient] – Hiệu ứng nền động

Shortcode này dùng để chèn hiệu ứng nền động dạng particles (hạt chuyển động, liên kết, tương tác chuột). Có thể dùng trong banner, header, hoặc các block đặc biệt để tạo điểm nhấn thị giác mạnh mẽ.

Cú pháp đơn giản

[init-fx-ambient ambient="hero"]

Các tham số chi tiết

Tham số	Giá trị mặc định	Giải thích
ambient	(bắt buộc)	Định danh hiệu ứng (tùy bạn đặt)
color	#ffffff	Màu của hạt và đường nối
lines	true	Bật/tắt đường nối giữa các hạt
speed	3	Tốc độ chuyển động
hover	repulse	Tương tác khi rê chuột: grab, bubble, repulse, none
click	push	Hiệu ứng khi click: push, remove, repulse, none
container_style	có sẵn	Style inline cho vùng chứa
container_class	”	Class CSS nếu bạn muốn style bằng file riêng

Ví dụ nâng cao

Hiệu ứng hạt màu xanh nhẹ

[init-fx-ambient ambient="section-1" color="#00ccff" speed="2"]

Không có đường nối – tạo hiệu ứng đơn giản

[init-fx-ambient ambient="light" lines="false"]

Hiệu ứng chỉ trong khối nhỏ

[init-fx-ambient ambient="mini-box" container_style="width: 300px; height: 200px; position: relative; z-index: 0;"]

Dùng class CSS riêng

[init-fx-ambient ambient="banner" container_class="fx-banner"]

Và định nghĩa trong CSS:

.fx-banner {
  width: 100%;
  height: 400px;
  position: relative;
  pointer-events: none;
  z-index: 0;
}

3. Định dạng tự động bằng ký hiệu đặc biệt

Plugin còn hỗ trợ tính năng tự động chuyển đổi các ký hiệu đơn giản trong văn bản thành HTML có định dạng nổi bật, giúp bạn làm nổi bật nội dung mà không cần viết thẻ HTML thủ công.

Bảng ký hiệu hỗ trợ

Ký hiệu	HTML tương ứng	Hiệu ứng
*nội dung*	<strong>	In đậm
`nội dung`	<em>	In nghiêng
~nội dung~	<del>	Gạch ngang
^nội dung^	<mark>	Highlight
_nội dung_	<span class="init-fx-highlight-text">	Underline bằng hiệu ứng nền neon

Ví dụ thực tế

Viết trong bài như sau:

*In đậm* ~hủy bỏ~ `ghi chú` ^highlight^ _hiệu ứng neon_

Sẽ tự động hiển thị như:

• In đậm
• hủy bỏ
• ghi chú
• highlight
• hiệu ứng neon

Lưu ý

• Chức năng này tự động áp dụng sau khi nội dung được render.
• Không hoạt động trong thẻ <script>, <style>, <pre> hoặc <a>.

Kết luận

Hai shortcode [init-fx] và [init-fx-ambient] là công cụ mạnh mẽ giúp bạn dễ dàng thêm các hiệu ứng động và tương tác vào trang web mà không cần viết code JavaScript phức tạp. Dù bạn là blogger, developer hay admin site cộng đồng – chỉ cần vài dòng shortcode là bạn đã có thể tạo ra trải nghiệm sinh động và hấp dẫn hơn cho người dùng.