Mengatur animasi
Slidde.co memungkinkan Anda untuk menerapkan animasi keyframe CSS standar ke elemen web Anda dengan mudah. Berikut adalah panduan langkah demi langkah untuk membantu Anda memulai.
Opsi Animasi di sidebar
- Pilih Elemen: Klik pada elemen apa pun di halaman Anda.
- Buka Modal Animasi: Di sidebar kanan, klik tombol tab Animasi, Anda akan menemukan opsi Animasi. Klik untuk membuka jendela modal.
- Mulai dengan Preset: Kami merekomendasikan untuk memulai dengan animasi preset, yang kemudian dapat Anda modifikasi sesuai kebutuhan Anda. Anda dapat mengklik tombol preset untuk mengganti dengan preset. Jika Anda mengklik ikon plus di tombol, preset akan ditambahkan ke animasi saat ini.
Kustomisasi Animasi
Modal animasi menyederhanakan proses pengaturan animasi keyframe CSS ke dalam antarmuka low-code, membuatnya dapat diakses bahkan jika Anda tidak terbiasa dengan pengkodean.
Animasi keyframe adalah tempat Anda mendefinisikan properti CSS untuk persentase tertentu. Dan browser menangani transisi untuk Anda.
Misalnya, jika Anda memiliki keyframe seperti ini dengan durasi 4 detik.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
Objek akan bergerak 20px ke bawah selama 2 detik, kemudian bergerak 20px ke atas kembali ke posisi semula selama 2 detik.
Jika Anda mengalami masalah atau ingin mempelajari lebih lanjut tentang animasi keyframe:
- Cari Online: Google pertanyaan spesifik Anda; ada banyak contoh dan sumber daya yang tersedia.
- Tutorial CSS Keyframes: Lihat panduan resmi CSS keyframes di MDN untuk informasi lengkap.
Pemicu
Bidang ini mengontrol kapan animasi diputar.
- Elemen ditampilkan: Ini adalah yang default. Animasi akan dipicu ketika elemen digulirkan ke tampilan, atau bagian yang berisi ditampilkan Bagian hash
- Elemen ditampilkan (putar ulang setiap kali): Sama seperti di atas, kecuali bahwa animasi akan diputar ulang setiap kali elemen ditampilkan.
- Halaman dimuat: Animasi akan dipicu ketika halaman dimuat.
Menganimasikan elemen anak
Anda dapat menargetkan anak dari elemen root dengan mengatur Targets ke &>*.
Penundaan bertahap
Jika Anda mengubah penundaan ke nilai berikut, efek bertahap akan diterapkan.
targets: &>*
delay: anime.stagger(100) // meningkatkan penundaan sebesar 100ms untuk setiap elemen.
targets: &>*
delay: anime.stagger(100, {start: 500}) // penundaan dimulai pada 500ms kemudian meningkat sebesar 100ms untuk setiap elemen.
Untuk lebih banyak contoh silakan lihat di sini Staggering basics
Penundaan teks
Ini berfungsi untuk komponen Teks.
Jika Anda mengatur target ke "Semua huruf"(& .letter). Efek bertahap akan diterapkan ke setiap huruf.
Menggunakan properti css animation
Animasi css biasa selalu tersedia untuk semua elemen di CSS. Namun, Anda mungkin perlu mengaktifkan Disable in canvas untuk aturan css tertentu agar lebih mudah diedit di editor.