Cara Menumpuk dan Menganimasikan Teks menggunakan Divi Scroll Effects

Menggunakan efek gulir Divi untuk menumpuk dan menganimasikan teks pada gulir adalah teknik desain unik yang dapat digunakan untuk menghidupkan judul halaman Anda. Triknya adalah menggunakan opsi posisi Divi untuk menumpuk huruf secara mutlak sehingga mereka duduk tepat di atas satu sama lain. Kemudian Anda dapat memindahkan huruf secara horizontal dan vertikal menggunakan efek gulir.

Coba lihat!

Sneak Peek

Berikut adalah tampilan singkat animasi teks yang akan kita buat dalam tutorial ini.

Berlangganan Saluran Youtube Kami

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file JSON ke Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Cara Menumpuk dan Menganimasikan Teks di Divi

Menyiapkan Bagian dan Baris

Pertama, buat baris satu kolom ke bagian reguler.

Pengaturan Bagian

Sebelum menambahkan modul apa pun, buka pengaturan bagian dan perbarui yang berikut:

• Warna Latar Belakang: rgba (201.245.255,0.35)
• Padding: 14vw atas, 14vw bawah

Pengaturan Baris

Selanjutnya, buka pengaturan baris dan perbarui yang berikut:

• Lebar Maks: 60%
• Penjajaran Baris: Pusat
• Tinggi: 20vw

Kami mengatur ketinggian ke nilai yang ditentukan karena kami akan menempatkan modul teks di dalam baris secara mutlak.

Menambahkan Modul Teks Bertumpuk yang Beranimasi saat Berjalan

Sekarang bagian dan baris sudah siap, kita bisa mulai menambahkan modul teks yang akan membuat desain heading kita. Modul teks pertama akan menyertakan teks judul utama. Tiga modul teks berikutnya akan berisi satu huruf yang akan digunakan untuk ditumpuk di atas bagian pertama dari heading dan kemudian dianimasikan pada scroll.

Mari kita mulai dengan menambahkan modul teks dengan judul utama.

Tambahkan Modul Teks #1

Tambahkan modul teks baru ke baris.

Kemudian perbarui modul teks dengan konten berikut.

<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2>
that jumps off the page

• Font Teks: Bungee Hairline
• Berat Font Teks: Tebal
• Ukuran Teks Teks: 4vw
• Tinggi Baris Teks: 1.5em
• Judul 2 Font: Bungee Shade
• Judul 2 Berat Font: Tebal
• Judul 2 Warna Teks:
• Judul 2 Ukuran Teks: 12vw
• Lebar: 100%

• Posisi: Absolut

Tambahkan Modul Teks #2

Modul teks berikutnya akan digunakan sebagai huruf pertama untuk tumpang tindih dengan huruf pertama dari judul. Untuk memulai desain modul teks, duplikat modul teks pertama.

Kemudian perbarui konten modul teks duplikat dengan huruf pertama dari teks judul (“D”).

Kemudian perbarui pengaturan desain sebagai berikut:

• Font Teks: Bungee Shade
• Berat Font Teks: Tebal
• Warna Teks Teks: rgba(83,144.193,0.3)
• Ukuran Teks Teks: 12vw
• Tinggi Baris Teks: 1em

Efek Gulir

Modul teks dengan huruf "D" sekarang ditumpuk langsung di atas huruf "D" di modul teks pertama. Kita akan memindahkan huruf sedikit pada scroll menggunakan kombinasi gerakan vertikal dan horizontal.

Gerak Vertikal

Di bawah tab lanjutan, pilih tab gerakan vertikal dan perbarui yang berikut:

• Aktifkan Gerakan Vertikal: YA
• Offset Awal: 0 (pada 20%)
• Offset Tengah: -0,5 (antara 40% dan 60%)
• Offset Akhir: 0 (pada 80%)

Jika Anda baru mengenal opsi efek gulir di Divi, nilai persentase teratas menunjukkan titik lokasi di dalam jendela browser. Setiap nilai persentase sesuai dengan offset di bawah ini (awal, tengah, dan akhir). Jadi, saat pengguna menggulir, huruf "D" akan mulai bergerak (dari offset awal "0") ketika mencapai 20% dari bagian bawah viewport. Ini akan terus menganimasikan (ke atas) hingga mencapai 40% dari bagian bawah area pandang dan kemudian ditahan pada offset “-0,5” hingga mencapai 60% dari bagian bawah area pandang. Setelah mencapai titik 60%, animasi akan mulai kembali ke offset “0” asli dan berhenti menghidupkan saat mencapai 80% dari bagian bawah viewport.

Gerak Horisontal

Untuk memberikan gerakan horizontal modul teks, pilih tab gerakan horizontal dan perbarui yang berikut (nilainya akan sama dengan gerakan vertikal):

• Aktifkan Gerakan Horizontal: YA
• Offset Awal: 0 (pada 20%)
• Offset Tengah: -0,5 (antara 40% dan 60%)
• Offset Akhir: 0 (pada 80%)

Tambahkan Modul Teks #3

Buat modul teks ketiga (atau huruf “D”) dengan menduplikasi modul teks sebelumnya.

Perbarui Efek Gulir

Kemudian perbarui efek gulir berikut.

Gerak Vertikal

• Offset Tengah: -1

Gerak Horisontal

• Offset Tengah: 1

Perbarui Warna Teks

Perbarui warna teks sebagai berikut:

• Warna Teks Teks: rgba(83,144.193,0.5)

Tambahkan Modul Teks #4

Hal-hal mungkin menjadi lebih sulit untuk dipilih pada saat ini dalam tampilan desktop. Terapkan mode tampilan gambar rangka dan duplikat modul teks sebelumnya untuk membuat huruf terakhir kita.

Perbarui Warna Teks

Perbarui warna teks sebagai berikut:

• Warna Teks Teks: #5390c1

Perbarui Efek Gulir

Kemudian lompat ke tab lanjutan dan sesuaikan efek gulir sebagai berikut:

Gerak Vertikal

• Offset Tengah: -1.5

Gerak Horisontal

• Offset Tengah: 1,5

Tambahkan Margin ke Bagian untuk Pengujian

Untuk menguji desain pada halaman langsung, Anda memerlukan ruang untuk menggulir. Kita dapat melakukan ini dengan mudah dengan menambahkan beberapa margin atas dan bawah ke bagian tersebut. Buka pengaturan bagian dan perbarui yang berikut ini:

• Margin: 40vw atas, 40vw bawah

Hasil Akhir

Sekarang kita akhirnya dapat melihat hasil akhir di halaman langsung.

Ini dia di ponsel.

Jangan ragu untuk bereksperimen dengan font yang berbeda menggunakan fitur temukan dan ganti Divi.

Pikiran Akhir

Posting ini akan membuat jus kreatif Anda berjalan untuk cara-cara baru untuk menganimasikan teks pada gulir. Ini akan bekerja dengan baik untuk judul bagian karena pengguna harus menggulir bagian (dari atas ke bawah) dan mengalami durasi penuh efek gulir.

Dan, kalau dipikir-pikir, konsep yang sama ini akan bekerja untuk gambar dan ikon juga.

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!