Cara Menambahkan Animasi ke Bagian/Baris

Sekali waktu di internet, menambahkan animasi ke situs Anda adalah tugas yang rumit dan agak khusus. Divi, bagaimanapun, memiliki alat animasi yang kuat dan efek gulir yang dapat Anda terapkan tanpa memerlukan banyak keahlian teknis. Siapapun dapat menambahkan efek ini ke situs mereka dengan sedikit usaha. Sementara proses tutorial ini dapat diterapkan ke elemen apa pun dalam Divi, kita akan fokus pada bagian dan baris hari ini untuk mencapai efek tertentu menggunakan itu. Mari kita menggali dengan animasi!

Pratinjau

Desktop

Seluler

Muat Divi Builder ke dalam Halaman atau Posting

Hal pertama yang perlu Anda lakukan adalah masuk ke Divi Builder. Baik Anda memilih salah satu paket tata letak kami (kami akan menggunakan paket tata letak klub tenis untuk artikel ini) atau desain Anda sendiri, semua langkah dilakukan dalam pengaturan Bagian dan Baris .

Dengan desain ini, kita akan menganimasikan 1 bagian dan 3 baris untuk mencapai efek pemuatan berurutan.

Pilih Tata Letak Premade

Untuk menerapkan salah satu paket tata letak kami yang dirancang secara profesional, masuk ke Divi Builder dan pilih Use a Premade Layout . Ini akan memunculkan daftar semua gratis yang kami tawarkan.

Pilih Tata Letak

Selanjutnya, cukup pilih paket tata letak mana yang ingin Anda gunakan. Anda dapat mengurutkan berdasarkan kategori atau mencari kata kunci untuk melihat apa yang telah kami buat untuk Anda.

Temukan Bagian dan Baris untuk Beranimasi

Ketika tata letak telah mengimpor semua aset dan halaman dimuat, Anda akan ingin menemukan bagian dan baris yang ingin Anda tambahkan animasinya. Ingat, Bagian diberi kode warna Biru di Divi Builder, dan Baris berwarna Hijau .

Setelah itu dipetakan, mari kita tambahkan animasi itu!

Cara Menambahkan Animasi ke Bagian dan Baris – Opsi 1

Menambahkan animasi ke bagian Divi sangat sederhana. Anda harus terlebih dahulu masuk ke pengaturan Bagian . Kemudian, navigasikan ke tab Desain dan gulir hingga Anda melihat opsi Animasi .

Di bawah opsi Animasi , Anda akan menyesuaikan hingga 8 opsi berbeda untuk animasi pilihan Anda.

1. Gaya Animasi adalah tempat Anda memilih bagaimana animasi muncul. Jika bagian akan berguling ujung-ke-ujung atau memantul dari sisi halaman seperti bola. Paling umum adalah Fade dan Slide .
2. Arah – Anda akan mengatur arah gerakan elemen. Nilai naik berarti bagian akan mulai dari bawah dan bergerak ke atas. Naik bukanlah titik asal.
3. Durasi – Berapa lama animasi berlangsung dari awal hingga akhir. Nilai yang lebih rendah akan mempercepatnya, dan nilai yang lebih tinggi akan memperlambatnya.
4. Penundaan – Opsi ini mencegah animasi agar tidak terpicu secepat mungkin dan dapat membantu menarik perhatian lebih daripada jika langsung memicu.
5. Intensitas – Semakin rendah nilainya, semakin halus daripada animasi, sementara nilai yang lebih tinggi lebih tajam dan lebih agresif.
6. Mulai Opacity – Nilai 0 akan menyebabkan animasi mulai tidak terlihat dan menjadi fokus selama durasi. 100 berarti elemen tersebut terlihat sepenuhnya bahkan sebelum animasi dimulai.
7. Kurva Kecepatan – Ini akan memungkinkan Anda untuk menyesuaikan seberapa lancar animasi dimulai dan diakhiri.
8. Ulangi – Apakah animasi Anda merupakan efek satu kali, atau apakah itu sesuatu yang ingin Anda ulangi berulang kali? Jika animasi disetel ke Once , halaman harus dimuat ulang untuk memulainya lagi.

Cara Menambahkan Animasi ke Bagian dan Baris – Opsi 2

Divi juga memiliki fitur bernama Scroll Effects . Ini adalah animasi yang dipicu setiap kali pengguna menggulir viewport mereka ke elemen. Efek gulir dapat diatur ke elemen apa pun, dan dapat dikombinasikan dengan opsi Animasi yang kami sebutkan di atas.

Cara Mengaktifkan Efek Gulir

Sekali lagi, elemen apa pun di Divi dapat diatur agar Efek Gulir diaktifkan, tetapi kita berurusan dengan bagian dan baris hari ini. Jadi, masukkan pengaturan Bagian Anda, navigasikan ke tab Lanjutan , dan temukan judul Efek Gulir .

Pilih Efek dan Pemicunya

Di dalam opsi Efek Gulir , Anda akan menemukan berbagai tab untuk berbagai jenis animasi yang dapat Anda picu saat menggulir.

• Posisi Lengket – Apakah bagian atau baris menempel pada layar pengguna saat mereka menggulir melewatinya atau tidak.
• Transform Effects – Ini adalah efek animasi yang sebenarnya: gerakan horizontal dan vertikal, fade in/out, penskalaan ukuran, rotasi, dan pengaburan.
• Atur [Fitur] – Anda akan dapat mengatur di mana efeknya paling terlihat di layar dan kapan/di mana itu terjadi
• Pemicu Efek Gerak – Anda akan menentukan apakah animasi dimulai saat bagian atas elemen memasuki area pandang, bagian tengah elemen, atau bagian bawah.

Perbedaan utama dalam hal ini versus menggunakan opsi Animasi di bagian sebelumnya adalah apakah Anda ingin animasi diotomatisasi atau jika Anda ingin memicu setiap kali pengguna melakukan suatu tindakan. Anda dapat menggabungkan animasi menggunakan opsi Scroll Effects dan Animation, yang akan kita gunakan untuk efek tutorial utama.

Menggabungkan Animasi untuk Bagian dan Baris

Anda dapat membuat beberapa efek yang menakjubkan untuk situs Anda dengan menggabungkan berbagai animasi untuk memicu pada waktu yang berbeda. Dengan menggunakan opsi Penundaan Animasi , situs Anda dapat menganimasikan serangkaian bagian, baris, dan elemen secara berurutan untuk menghasilkan beberapa visual yang mengesankan.

Untuk memulainya, kita akan mengatur Animation Style di pengaturan Section ke Slide dengan Animation Direction diatur ke Up .

Kami akan menyimpan sisa opsi pada defaultnya. Terutama Penundaan Animasi . Kami ingin Bagian terpicu saat sedang dilihat.

Pengaturan Animasi untuk Baris 1

Selanjutnya, kita akan menyesuaikan baris pertama di bagian tersebut. Kami masuk ke pengaturan Baris , pergi ke opsi Animasi di bawah tab Desain , dan sekali lagi pilih Slide . Kali ini, kita ingin mengubah Direction menjadi Down dan Animation Delay menjadi 5 00ms . 1000ms sama dengan 1 detik, ingat.

Karena kami meninggalkan waktu Bagian pada 0 ms untuk memicu segera, kami ingin baris sedikit diimbangi, memungkinkan animasi awal sebagian besar selesai sebelum yang ini dimulai.

Pengaturan Animasi untuk Baris 2

Selanjutnya, kita akan masuk ke pengaturan untuk Baris kedua halaman dan pergi ke opsi Animasi . Sekali lagi, kita akan memilih Slide untuk Animation Style , dan baris ini akan meluncur ke arah Right .

Selain itu, kita akan menyetel Penundaan Animasi pada 1000 ms , yang berarti penundaan ini akan terpicu segera setelah animasi pertama berakhir.

Pengaturan Animasi untuk Baris 3

Untuk baris ketiga yang sedang kita animasikan, kita akan menggunakan Scroll Effects untuk mencapai tujuan kita. Karena baris ketiga kita dimulai tepat di paruh atas, sebagian besar animasi tidak akan terlihat jika kita hanya menggunakan penundaan waktu seperti yang kita lakukan dengan elemen lainnya. Jadi kita akan membuatnya jadi bukan itu masalahnya.

Opsi Animasi

Pertama, kita akan mengulangi proses di atas. Hanya dengan baris ini, kita mengatur Animation Style ke Fade. Kemudian, kita akan mengatur Durasi menjadi 500ms sehingga baris ini muncul lebih cepat selama animasinya. Kami akan Tunda dengan 1500ms untuk memastikan animasi lainnya sepenuhnya selesai sebelum ini dimulai.

Terakhir, pastikan untuk memeriksa bahwa Opacity Mulai diatur ke 0% . Kami ingin baris ini tidak terlihat sampai siap untuk dilihat.

Pengaturan Efek Gulir

Di sinilah segalanya menjadi menyenangkan karena kita bisa menggabungkan efek. Klik pada tab Advanced untuk Baris dan temukan Scroll Effects . Temukan tab Horizontal Motion dan pastikan untuk mengaktifkannya. Kemudian atur Motion Effect Trigger ke Middle of Element . Kami menggunakan bagian tengah daripada bagian atas untuk memastikan bahwa efeknya tidak mulai berlaku sampai pengguna menggulir, untuk berjaga-jaga jika area pandang pengguna menunjukkan bagian atas baris.

Dengan set itu, baris akan menunggu hingga semua yang lain selesai dianimasikan untuk muncul, dan kemudian ketika pengguna menggulir ke arahnya, seluruh baris akan tampak meluncur dari sisi layar.

Hasil Akhir

Ketika Anda menyelesaikan semua itu, hasil Anda harus seperti ini.

Desktop

Seluler

Kesimpulan

Menambahkan efek animasi adalah cara yang pasti untuk membuat situs Anda lebih dinamis, lebih menarik, dan lebih menarik secara visual. Menggunakan alat animasi dan efek gulir bawaan Divi, Anda dapat membuat kombinasi luar biasa yang akan memukau setiap pengunjung yang kebetulan mampir.

Apa yang telah Anda gunakan untuk membuat efek animasi Divi dari bagian dan baris Anda? Mari kita lihat mereka di komentar!

Gambar unggulan artikel oleh Vectorchok / shutterstock.com