DIVI hadir dengan banyak kemungkinan animasi untuk memberikan dinamisme pada situs web. Namun, Anda hanya dapat menambahkan animasi ini satu per satu ke dalam wadah. Jika untuk beberapa animasi cukup sempurna, tepat waktu, Anda dapat dengan cepat menganggapnya terbatas. Misalnya, terkadang, Anda mungkin ingin menambahkan lebih dari satu animasi teks dan itulah yang akan kita bahas hari ini menggunakan modul teks, Letterize.js & Animate.js yang merupakan pustaka javascript yang memberikan animasi CSS ke elemen DOM. Dengan pendekatan itu, Anda dapat membuat animasi seperti itu dengan modul Divi lainnya.

Mari kita mulai.
Kemungkinan Hasil Akhir
Berikut adalah kemungkinan hasil yang bisa kita capai di akhir tutorial.
1. Buat Desain Bagian Pahlawan
Kita akan mulai dengan membuat bagian besar yang juga diberi nama "Bagian Pahlawan", dan menambahkan bagian unik ke dalamnya.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarangTambahkan Bagian Baru
Jarak
Mulailah dengan membuat halaman baru. Di dalam halaman itu, tambahkan bagian baru. Buka pengaturan bagian dan ubah padding atas dan bawah sebagai berikut:
- Padding Atas: 180px (Desktop), 100px (Tablet), 50px (Ponsel)
- Padding Bawah: 180px (Desktop), 100px (Tablet), 50px (Ponsel)

Tambahkan Satu Baris
Struktur Kolom Tunggal
Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Konfigurasikan Spasi
Kami tidak akan menambahkan modul apa pun sekarang, melainkan menentukan pengaturan padding.
- Bantalan Bawah: 0px

Tambahkan Modul Teks Ke Kolom Pertama
Tambahkan Salinan H1
Satu-satunya modul yang akan kita tambahkan ke baris ini adalah Modul Teks. Tambahkan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1
Beralih ke tab desain modul dan ubah pengaturan teks berikut:
- Font Judul: Montserrat
- Warna Teks Judul: rgba(232,232,232,0.41)
- Ukuran Teks Judul: 80px (Desktop), 50px (Tablet), 40px (Ponsel)
- Spasi Huruf Judul: -10px (Desktop), -4px (Tablet), -3px (Ponsel)
- Tinggi Garis Judul: 0,6em (Desktop), 0,7em (Tablet), 0,8em (Ponsel)

Tambahkan Baris Kedua
Struktur Kolom
Mari tambahkan baris lain tepat di bawah baris sebelumnya dengan struktur kolom berikut:

Perekat
Buka pengaturan baris dan ubah lebar maksimal di pengaturan ukuran.
- Lebar Maks: 1680 piksel

Jarak
Hapus semua margin bawah dan padding selanjutnya.
- Margin Bawah: 0px
- Bantalan Bawah: 0px

Tambahkan Modul Gambar Ke Kolom Kedua
Unggah Ilustrasi
Lalu, tambahkan Modul Gambar dan unggah ilustrasi pilihan Anda. Itu akan terlihat seperti ilustrasi latar belakang.

Perekat
Sekarang beralih ke tab desain modul dan paksakan lebar penuh pada gambar.
- Paksa Lebar Penuh: Ya

Jarak
Tambahkan beberapa margin bawah negatif berikutnya.
- Margin Bawah: -12%

Animasi
Mari selesaikan pengaturan modul dengan menambahkan pengaturan animasi berikut:
- Gaya Animasi: Pudar
- Penundaan Animasi: 3000ms

Tambahkan Baris Ketiga
Tentukan Struktur Kolom
Ke baris berikutnya dan terakhir. Gunakan struktur kolom berikut:

Jarak
Pindah ke tab desain baris dan tambahkan beberapa nilai padding khusus.
- Bantalan Atas: 10%
- Bantalan Bawah: 5%
- Bantalan Kiri: 3%
- Bantalan Kanan: 3%

Bayangan Kotak
Lalu, pilih bayangan kotak yang halus.
- Kekuatan Buram Bayangan Kotak: 80px
- Warna Bayangan: rgba(0,0,0,0.06)

Animasi
Dan selesaikan pengaturan baris dengan menambahkan animasi berikut:
- Gaya Animasi: Pudar
- Penundaan Animasi: 3000ms

Tambahkan Modul Teks Ke Baris Ketiga
Menyediakan Konten
Jangan menambahkan modul. Modul pertama yang kita butuhkan adalah Modul Teks dengan beberapa konten.

Pengaturan Teks
Pindah ke tab desain modul dan ubah pengaturan teks sesuai:
- Font Teks: Lato
- Ukuran Teks: 18px
- Spasi Huruf Teks: 1px
- Tinggi Baris Teks: 2,7em

Tambahkan Modul Tombol Ke Kolom
Berikan Teks
Modul terakhir yang kita perlukan adalah Modul Tombol. Masukkan teks pilihan Anda.

Pengaturan Tombol
Pindah ke tab desain modul dan ubah pengaturan tombol sebagai berikut:
- Gunakan Gaya Kustom Untuk Tombol: Ya
- Ukuran Teks Tombol: 16px
- Warna Teks Tombol: #171cff
- Lebar Batas Tombol: 0px
- Radius Batas Tombol: 0px

- Font Tombol: Montserrat
- Gaya Font Tombol: Huruf Besar

Jarak
Kemudian, terapkan nilai padding berikut di dalam pengaturan spasi:
- Bantalan Atas: 2%
- Bantalan Bawah: 2%
- Bantalan Kiri: 5%
- Bantalan Kanan: 5%

Bayangan Kotak
Selesaikan pengaturan modul dengan menambahkan bayangan kotak berikut:
- Posisi Vertikal Bayangan Kotak: 5px
- Kekuatan Penyebaran Bayangan Kotak: -2px
- Warna Bayangan: #171cff

2. Tambahkan Kelas CSS ke Judul
Buka Modul Teks Pertama Dan Klik Tab Teks
Sekarang kita sudah memiliki semua elemen desain, saatnya menambahkan animasi teks tingkat lanjut ke judul kita. Buka Modul Teks yang berisi salinan H1 dan pilih tab teks.

Tambahkan atribut ID ke Tag H1
Di dalam H1 tambahkan atribut ID khusus.
- ID="salinan judul"

3. Tambahkan Perpustakaan Letterize & Anime
Tambahkan Modul Kode ke Kolom
Untuk membuat animasi, kami menggunakan perpustakaan letterize.js dan anime.js. Untuk menambahkan perpustakaan ini, masukkan Modul Kode baru di kolom baris terakhir Anda.

Sertakan Kedua Perpustakaan
Lalu, tambahkan dua tag skrip berbeda yang berisi sumber berikut yang mengarah kembali ke perpustakaan:
- <skrip src=”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”></script>
- <skrip src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>

4. Tambahkan Kode Animasi
Animasi Surat pada Tingkat Individu
Untuk bagian terakhir tutorial ini, kita akan menambahkan kode animasi dan ini akan berfungsi untuk perpustakaan letterize.js dan anime.js. Untuk mendapatkan efek yang bagus pada teks, kita akan menerapkan dua jenis animasi. Animasi pertama diterapkan pada setiap huruf secara individual dan berurutan. Hal ini dicapai dengan perpustakaan letterize.js. Pustaka ini, dikombinasikan dengan bagian pertama kode di bawah, menempatkan setiap huruf dalam salinan Anda dalam rentang terpisah. Rentang ini kemudian akan ditargetkan secara terpisah selama proses animasi. Pastikan Anda menempatkan kode di bawah ini di antara tag skrip.
jQuery(function ($) {
$(document).ready(function () {
var headlineCopy = new Letterize({
targets: "#headline-copy"
});
var animation = anime.timeline({
targets: headlineCopy.listAll(),
delay: anime.stagger(20),
loop: false
});
animation.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
}).add({
color: '#00FFF7',
}).add({
color: '#D2BEFB',
}).add({
color: '#171cff',
});
});
});
Setiap fungsi "tambah" mewakili animasi dalam garis waktu animasi. Animasi ini berlaku untuk setiap huruf secara tunggal. Anda dapat memodifikasi fungsi penambahan ini sesuai keinginan dengan mengikuti Letterize API , menambahkan fungsi baru atau menghapus fungsi saat ini, pastikan saja fungsi penambahan terakhir ditutup dengan benar dengan tanda ';' di bagian akhir (seperti yang Anda lihat pada kode di atas).
Anda dapat menambahkan properti CSS yang berbeda di dalam fungsi "tambah" ini. Anda dapat mengetahui lebih lanjut tentang properti dan cara penggunaannya dalam contoh dokumentasi anime.js .
Dalam tutorial ini, kami sengaja menambahkan beberapa animasi untuk menunjukkan cara kerja timeline, namun Anda mungkin ingin menggunakan sesuatu yang lebih halus atau lebih pendek untuk proyek Anda sendiri.

Animasi untuk Kalimat
Setelah Anda menambahkan bagian pertama animasi, yang menargetkan setiap huruf satu per satu, kita akan melanjutkan ke bagian kedua animasi kita. Bagian ini menargetkan keseluruhan salinan secara keseluruhan. Pendekatan animasinya sama seperti di atas; kami menempatkan seluruh modul di dalam animasi garis waktu. Setiap fungsi tambahan mewakili animasi berbeda di dalam timeline tersebut. Anda dapat mengubah fungsi tambahan ini, menambahkan fungsi baru, atau menghapus fungsi yang ada saat ini. Pastikan Anda menempatkan kode baru ini sebelum akhir kode skrip seperti yang Anda lihat pada layar cetak di bawah.
anime.timeline({loop: false})
.add({targets: '#headline-copy',lineHeight: '1em',delay: '1500'
})
.add({targets: '#
headline-copy
',translateX: ['-5%', 0],letterSpacing: '-2px',});

Tambahkan CSS Khusus untuk Span
Sekarang, karena kita telah membuat rentang terpisah untuk masing-masing huruf, kita perlu mengubah properti tampilan setiap rentang agar huruf dapat muncul bersebelahan. Untuk melakukan itu, kita akan menambahkan beberapa kode CSS ke modul kode kita. Pastikan Anda menempatkan kode di antara tag gaya.
#headline-copy span {display: inline-block;}

Pratinjau Akhir
Sekarang setelah kita melalui semua langkahnya, mari kita lihat hasil akhirnya pada berbagai ukuran layar.

Pikiran Terakhir
Jadi sepanjang postingan ini, kami telah menunjukkan kepada Anda cara membuat animasi teks pada judul Anda. Kami telah membangun seluruh desain di dalam Divi dan menggabungkan kerangka kerja dengan perpustakaan letterize.js dan anime.js . Maukah Anda menguji animasi ini di blog Anda? Apakah Anda memiliki animasi lain untuk dibagikan kepada kami? Beritahu kami.