Menambahkan Animasi CSS ke WordPress
Diterbitkan: 2022-07-11Animasi dapat menjadi fitur yang menarik dan menarik secara visual untuk halaman web Anda. Namun, membuat animasi dengan Flash atau JavaScript akan menghabiskan sebagian besar sumber daya situs Anda.
Untungnya, Anda dapat menambahkan animasi ke situs WordPress Anda dengan Cascading Style Sheets (CSS). Bahasa pengkodean ini memungkinkan Anda untuk memasukkan animasi tanpa batas di situs Anda, tetapi masih relatif mudah didekati dan mudah dipelajari.
Pada artikel ini, kita akan membahas cara kerja animasi CSS dan cara menambahkan properti animasi CSS ke situs web Anda dengan dan tanpa plugin. Ayo bergerak!
Bagaimana Cara Kerja Animasi CSS? (Dan Mengapa Anda Harus Menggunakannya)
CSS3 memberi pengguna kesempatan untuk membuat animasi dengan mengubah gaya elemen (misalnya, gambar atau tombol) dari waktu ke waktu. Anda dapat memodifikasi properti CSS elemen sebanyak yang Anda inginkan, sebanyak yang Anda inginkan.
Tidak seperti animasi Flash atau Javascript, animasi CSS menghindari masalah kompatibilitas browser dan pengkodean yang rumit. Ini memungkinkan Anda untuk menarik perhatian ke fitur penting tanpa efek samping negatif seperti penurunan kinerja.
Menambahkan Animasi CSS Dengan Plugin
Jika Anda tidak yakin dengan kemampuan coding Anda, kami siap membantu Anda. Anda dapat dengan mudah membuat animasi CSS dengan plugin.
Langkah 1: Instal dan Aktifkan Plugin Animasi CSS
Untuk memulai, Anda harus menginstal plugin animasi CSS. Kami menggunakan Animasi Blok: Animasi CSS untuk Blok Gutenberg, alat yang relatif baru yang dibuat khusus untuk Editor Blok.
Anda dapat menemukan plugin ini dengan menavigasi ke Plugins > Add New di dashboard WordPress Anda. Setelah Anda menemukannya, klik Instal Sekarang dan kemudian Aktifkan :
Setelah aktivasi selesai, buka posting atau halaman di mana Anda ingin memasukkan animasi sederhana Anda.
Langkah 2: Rancang Animasi Anda
Selanjutnya, klik pada elemen yang ingin Anda animasikan. Di tab Blok di bilah sisi, cari bagian berlabel Animation , yang ditambahkan saat kita mengaktifkan plugin di Langkah 1 . Di sini Anda akan melihat menu tarik-turun yang mencantumkan beberapa efek berbeda:
Anda dapat bermain-main dengan pilihan animasi sebanyak yang Anda inginkan untuk menemukan yang sesuai dengan konten Anda.
Langkah 3: Sesuaikan Penundaan dan Kecepatan
Plugin Blocks Animation juga dilengkapi dengan fungsi pengaturan waktu untuk menyesuaikan Delay dan Kecepatan animasi Anda:
Yang pertama dari dua pengaturan ini menunda dimulainya animasi. Ini dapat membantu menarik perhatian ke elemen Anda setelah halaman dimuat, atau memungkinkan Anda untuk menggunakan kombinasi animasi, seperti yang akan segera kami tunjukkan. Anda dapat mengatur properti tunda animasi selama lima detik.
Menggunakan drop-down kecepatan, Anda dapat membuat animasi Anda Lambat, Lebih Lambat, Cepat, atau Lebih Cepat . Animasi yang lebih lambat mungkin lebih halus dan tidak terlalu menggelegar bagi pengunjung, sementara animasi yang lebih cepat akan lebih menarik perhatian mereka.
Langkah 4: Simpan dan Pratinjau Animasi Anda
Sebaiknya simpan postingan atau halaman Anda sebagai draf dan pratinjau elemen animasi Anda sebelum menerbitkannya. Pastikan untuk menyimpan properti nama animasi juga jika Anda bekerja dengan beberapa animasi CSS pada satu halaman. Meskipun animasi terbukti sangat berguna, mereka juga berpotensi mengganggu dan membuat halaman Anda terasa berantakan.
Pratinjau halaman Anda dan menjaga animasi Anda relatif sederhana akan mencegah hasil yang tidak diinginkan ini. Di bawah ini, Anda dapat melihat contoh animasi CSS kami yang telah selesai, yang memasangkan gambar animasi dengan tombol yang kami tata di langkah sebelumnya:
Jika Anda menemukan animasi Anda tidak sesuai dengan sisa konten Anda atau memiliki efek yang Anda inginkan, Anda cukup kembali ke Editor Blok dan menyesuaikannya. Itulah keindahan menggunakan plugin animasi CSS – cepat dan mudah.
Menambahkan Animasi CSS Tanpa Plugin
Jika Anda merasa nyaman mengedit file tema, Anda dapat membuat animasi khusus secara manual tanpa plugin. Dibutuhkan sedikit pengetahuan pengkodean, jadi solusi ini sebaiknya diserahkan kepada mereka yang memiliki pengalaman pengembangan.
Sebelum Anda memulai, pastikan untuk membuat cadangan situs Anda. Juga bijaksana untuk menggunakan tema anak, sehingga Anda dapat dengan mudah kembali ke file default tema Anda jika Anda merasa perlu.
Langkah 1: Pahami Properti CSS yang Terlibat
Sebelum Anda benar-benar melakukan pengeditan, ada delapan properti penting yang perlu diingat saat membuat animasi CSS:
- @keyframes: Menentukan gaya yang akan diterapkan ke elemen melalui animasi.
- animation-name: Membuat nama yang dapat Anda gunakan untuk mereferensikan animasi di tempat lain dalam kode Anda.
- animasi-durasi: Menentukan berapa lama animasi harus berjalan.
- animation-delay: Menyatakan berapa lama animasi harus menunggu untuk dimulai setelah halaman dimuat.
- animation-iteration-count: Mencatat berapa kali animasi harus dijalankan.
- animations-direction: Menyatakan ke arah mana animasi harus dijalankan.
- animasi-waktu-fungsi: Menentukan kurva kecepatan animasi.
- animation-fill-mode: Menentukan gaya untuk elemen saat animasi tidak diputar.
- animasi: Properti singkatan untuk mengikat keyframe ke elemen.
Yang paling penting dari properti ini untuk dipahami adalah 'keyframe.' Istilah ini berasal dari proses animasi yang digambar dengan tangan, di mana bingkai utama disebut bingkai utama dan yang lainnya ditarik untuk memimpin atau keluar darinya.
Dalam animasi CSS, keyframe menentukan apa yang terjadi dan kapan. Ambil yang ini, misalnya:
contoh @keyframes {
0% {warna-latar belakang: merah;}
25% {warna latar belakang: kuning;}
50% {warna latar: biru;}
100% {warna latar belakang: hijau;}
}Keyframe di atas menyatakan bahwa 25 persen dari jalan melalui animasi, warna latar belakang dari elemen yang ditentukan akan berubah dari merah menjadi kuning. Persentase biasanya digunakan untuk menentukan waktu animasi. Namun, dari dan ke dapat digunakan masing-masing sebagai pengganti 0% dan 100%.
Langkah 2: Buat File animate.css Anda
Untuk menambahkan animasi CSS, Anda harus membuat file di editor teks pilihan Anda menggunakan properti di atas. Itu harus menyertakan bingkai utama untuk animasi apa pun yang ingin Anda gunakan. Kemudian Anda akan mengikatnya ke kelas CSS tertentu sehingga Anda dapat menerapkannya ke elemen di situs Anda.
Berikut adalah contoh. Dalam kode di bawah ini, pertama-tama kita membuat animasi keyframe CSS menggunakan properti transformasi dan visibilitas, yang akan memungkinkan kita untuk menggeser elemen dari sisi kanan layar:
@keyframes slideInRight {
dari {
-webkit-transform: translate3d(100%, 0, 0);
mengubah: translate3d(100%, 0, 0);
visibilitas: terlihat;
}
ke {
-webkit-transform: translate3d(0, 0, 0);
mengubah: translate3d(0, 0, 0);
}
}Kami kemudian harus mengikat keyframe itu ke kelas CSS. Dalam hal ini, itu diberi nama slideInRight. Kode ini akan ditempatkan langsung setelah keyframe di atas dalam file:
.slideInRight {
-nama-webkit-animasi: slideInRight;
nama-animasi: slideInRight;
}Anda dapat mengulangi proses ini untuk membuat animasi sebanyak yang Anda suka. Kemudian, simpan file tersebut sebagai animate.css. Atau, Anda dapat mengunduh file Animate.css yang populer. Ini berisi keyframes dan kelas CSS untuk puluhan animasi populer sehingga Anda tidak perlu membuat kode animasi kompleks Anda sendiri.
Langkah 3: Unggah File animate.css Anda ke Situs Anda
Setelah file animate.css Anda selesai, Anda harus mengunggahnya ke direktori tema Anda. Untuk melakukannya, akses situs Anda menggunakan File Transfer Protocol (FTP) dan klien FTP seperti FileZilla. Anda dapat menemukan kredensial yang diperlukan di akun hosting Anda.
Anda harus masuk ke direktori public_html Anda, arahkan ke wp-content > themes, dan temukan folder untuk tema aktif Anda (atau child theme):
Cari subdirektori berlabel css . Jika ada, unggah file animate.css Anda (atau file animate.mini.css dari Animate.css) ke sana. Jika Anda belum memiliki folder ini, Anda dapat dengan mudah membuat subdirektori baru dan memberi nama yang sesuai:
Setelah file Anda berhasil diunggah, jangan langsung meninggalkan klien FTP Anda. Anda harus melakukan sedikit pengeditan file untuk mengakses stylesheet ini di situs WordPress Anda.
Langkah 4: Panggil Animate Stylesheet Via functions.php
Selanjutnya, di folder tema aktif Anda, temukan file functions.php Anda. Pada akhirnya, tambahkan potongan kode ini:
add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
fungsi wpb_animate_styles() {
wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}Perhatikan bahwa, jika Anda mengunggah file animate.min.css dari Animate.css, Anda harus menggunakan animate.min.css di baris terakhir alih-alih animate.css.
Ini memungkinkan tema Anda untuk memanggil stylesheet yang baru saja Anda unggah sehingga Anda dapat menerapkan kelas di dalamnya ke elemen di situs Anda. Setelah perubahan Anda disimpan, kembali ke dasbor WordPress Anda.
Langkah 5: Terapkan Animasi Menggunakan Kelas CSS
Anda sekarang dapat menerapkan kelas apa pun di file animate.css Anda ke elemen di posting dan halaman Anda. Jika Anda menggunakan file Animate.css, Anda dapat merujuk daftar lengkap dari semua yang disertakan di GitHub.
Arahkan ke pos atau halaman yang berisi elemen yang ingin Anda animasikan. Di Editor Klasik, alihkan ke editor teks. Jika Anda menggunakan Editor Blok, klik ikon tiga titik dari bilah alat blok dan pilih Edit sebagai HTML :
Kemudian, tambahkan kelas animasi dan kelas untuk animasi Anda ke tag elemen:
Terakhir, pratinjau posting atau halaman Anda. Animasi Anda sekarang seharusnya berfungsi:
Anda dapat mengadaptasi proses ini untuk memasukkan animasi apa pun ke dalam file animate.css Anda.
Jaga agar Situs Anda Terlihat Hebat Dengan WP Engine
Menggunakan fitur visual yang menarik seperti animasi dapat melibatkan pengunjung situs Anda dan membuat kehadiran online lebih profesional. Di sini, di WP Engine, kami bangga memberikan tip dan trik terbaik untuk pengembang WordPress sehingga situs Anda selalu terlihat terbaik.
Ketika dikombinasikan dengan platform hosting terbaik kami, Anda akan memiliki semua alat yang Anda butuhkan untuk mengesankan pengguna Anda. Lihat rencana kami hari ini!