Cara Menganimasikan Teks Menggunakan Animate.js dan Letterize.js di Divi

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 sekarang

Tambahkan 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.