Plugin Custom Animation Bundle (CAB) PUJASHANTI

Panduan Penggunaan Plugin Custom Animation Bundle (CAB)

Versi: 1.1.3 (Updated 2026) Panduan Penggunaan Plugin Custom Animation Bundle (CAB). Pustaka ini dirancang untuk memberikan efek visual yang ringan, berperforma tinggi, dan ramah SEO pada website WordPress Anda.

1. Struktur Class Dasar

Setiap elemen yang ingin diberi animasi harus memiliki minimal dua class utama:

• cab-anim: Class wajib yang menyiapkan elemen (mengatur opacity 0 agar tidak terjadi kedipan saat halaman dimuat).
• Class Efek: Menentukan jenis gerakan yang diinginkan.

2. Daftar Efek Animasi

Anda dapat memilih salah satu dari efek berikut:

Kategori	Class	Deskripsi Gerakan
Fade	cab-fade-in	Muncul perlahan di tempat.
	cab-fade-up	Muncul perlahan sambil bergerak ke atas.
Zoom	cab-zoom-in	Membesar dari titik tengah.
	cab-zoom-up	Membesar sambil bergerak ke atas.
Slide	cab-slide-left	Muncul dari arah kiri.
	cab-slide-right	Muncul dari arah kanan.
	cab-slide-top	Muncul dari atas ke bawah.
	cab-slide-bottom	Muncul dari bawah ke atas.
Attention	cab-pulse	Efek berdenyut terus-menerus (looping).

3. Pengaturan Jeda (Delay) & Kecepatan

Untuk membuat efek berurutan (staggered), gunakan class utilitas berikut:

• Jeda Standar (CSS):
  • cab-delay-1 s/d cab-delay-5 (Jeda 0.1 detik hingga 0.5 detik).
• Jeda & Durasi Kustom (Dinamis via JS):
  • cab-delay-[angka]ms: Contoh cab-delay-750ms.
  • cab-duration-[angka]ms: Contoh cab-duration-2000ms.

4. Contoh Implementasi Kode

Salin contoh berikut ke dalam editor HTML WordPress atau Page Builder Anda:

Contoh Animasi:

HTML

<div class="column cab-anim cab-fade-up cab-delay-1" style="background-color: blue; text-align: center; color: white; border-radius: 5px; margin: 10px 20px; 20px">Fitur A</div>
<div class="column cab-anim cab-fade-up cab-delay-2" style="background-color: green; text-align: center; color: white; border-radius: 5px; margin: 10px 20px;">Fitur B</div>
<div class="column cab-anim cab-fade-up cab-delay-3" style="background-color: green; text-align: center; color: white; border-radius: 5px; margin: 10px 20px;">Fitur C</div>

<div class="cab-anim cab-zoom-in cab-delay-800ms cab-slow" style="background-color: blue; text-align: center; color: white; border-radius: 5px; margin: 10px 20px; 20px;">
   Teks ini muncul sangat lembut setelah 0.8 detik.
</div>

5. Catatan Teknis & Performa

• Intersection Observer: Animasi hanya akan berjalan saat elemen masuk ke area layar (viewport) untuk menghemat baterai perangkat mobile.
• Akselerasi GPU: Menggunakan translate3d untuk memastikan gerakan tetap mulus pada 60fps.
• Aksesibilitas: Animasi otomatis mati jika pengguna mengaktifkan fitur “Reduce Motion” di sistem operasi mereka.

---

Panduan Implementasi Animasi CAB

Versi: 1.1.3

Fungsi animasi CAB dirancang agar fleksibel dan dapat diterapkan melalui dua metode utama di dalam editor WordPress:

Metode 1: Menambahkan Class pada Blok HTML Kustom

Metode ini digunakan jika Anda membangun elemen secara manual menggunakan blok Custom HTML. Ini memberikan kontrol penuh atas struktur elemen.

Langkah-langkah:

1. Masukkan blok Custom HTML di editor halaman Anda.
2. Tambahkan class wajib .cab-anim diikuti oleh class efek dan jeda (delay).
3. Contoh Kode:

<div class="cab-anim cab-fade-up cab-delay-1">
    <h3>Judul Animasi</h3>
    <p>Konten ini akan muncul dengan efek fade-up.</p>
</div>

---

Metode 2: Menambahkan Class melalui Pengaturan Blok (Gutenberg/Elementor)

Metode ini adalah cara termudah bagi pengguna yang menggunakan blok standar WordPress (seperti Gambar, Judul, atau Paragraf) atau Page Builder.

Langkah-langkah:

1. Klik pada blok yang ingin Anda beri animasi (misalnya blok Image atau Heading).
2. Buka panel pengaturan di sisi kanan layar (Tab Block).
3. Gulir ke bawah hingga menemukan menu Advanced (Tingkat Lanjut).
4. Pada kolom Additional CSS Class(es), masukkan kombinasi class animasi tanpa titik, dipisahkan dengan spasi.
5. Contoh Pengisian:

cab-anim cab-slide-bottom cab-delay-2

---

Tabel Referensi Class Utama

Gunakan kombinasi class berikut sesuai kebutuhan visual Anda:

Jenis Efek	Nama Class (Pilih Satu)	Class Jeda (Opsional)
Fade	cab-fade-in, cab-fade-up	cab-delay-1 (0.1s)
Zoom	cab-zoom-in, cab-zoom-up	cab-delay-2 (0.2s)
Slide	cab-slide-left, cab-slide-right	cab-delay-3 (0.3s)
Vertical Slide	cab-slide-top, cab-slide-bottom	cab-delay-500ms (Kustom)

Tips Pro: Anda dapat menggabungkan class durasi kustom seperti cab-duration-2000ms di kolom class tambahan untuk membuat gerakan yang lebih dramatis dan lambat.

---

Cara memasang plugin

Berikut adalah panduan praktis untuk menginstal Custom Animation Bundle (CAB) PUJASHANTI melalui Dashboard WordPress. Plugin ini dirancang agar sangat ringan dan tidak membebani server Anda karena hanya menjalankan animasi saat elemen terlihat di layar.

---

Panduan Instalasi Plugin CAB

1. Persiapkan File Plugin

• Pastikan Anda telah mengunduh file plugin dalam format .zip.
• Jangan mengekstrak file tersebut di komputer Anda; biarkan dalam format .zip agar bisa dibaca oleh sistem pengunggah WordPress.

2. Unggah Melalui Dashboard WordPress

• Masuk ke Dashboard Admin WordPress Anda.
• Buka menu Plugins > Add New (Tambah Baru).
• Klik tombol Upload Plugin (Unggah Plugin) yang terletak di bagian atas halaman.
• Klik Choose File (Pilih File) dan pilih file .zip yang telah Anda siapkan tadi.
• Klik tombol Install Now (Instal Sekarang).

3. Aktivasi Plugin

• Setelah proses unggah selesai, WordPress akan menampilkan pesan konfirmasi.
• Klik tombol Activate Plugin (Aktifkan Plugin) untuk mulai menggunakan fitur animasi di website Anda.

---

Cara Memastikan Plugin Sudah Terpasang

• Cek daftar plugin aktif Anda; pastikan Custom Animation Bundle sudah muncul dengan versi terbaru.
• Plugin ini secara otomatis akan memuat file animations.css dan anim-handler.js ke front-end website Anda dengan sistem Anti-Cache untuk memastikan performa maksimal.