Cara Mendesain Topeng Teks dengan Animasi Latar Belakang pada Gulir di Divi
Diterbitkan: 2020-08-16Desain Text Mask sangat mudah dibuat menggunakan opsi bawaan Divi. Pembangun memiliki semua bahan untuk membuat efek topeng teks termasuk opsi untuk gaya teks, latar belakang, dan mode campuran. Sebenarnya, kami telah membuat desain topeng teks menggunakan mode campuran sebelumnya. Namun, dengan efek gulir, kita dapat membawa desain topeng teks ke tingkat yang baru.
Dalam tutorial ini, kami akan menunjukkan cara mendesain topeng teks dengan animasi latar belakang saat menggulir di Divi. Desainnya unik dan efek gulirnya benar-benar membuatnya menjadi hidup.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
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 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.
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 bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor.
Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Mendesain Topeng Teks dengan Animasi Latar Belakang di Divi
Menambahkan baris
Untuk memulai, tambahkan baris dua kolom ke bagian reguler default.
Perbarui Pengaturan Bagian
Sebelum menambahkan modul apa pun, buka pengaturan bagian dan perbarui warna latar belakang dan padding sebagai berikut:
- Warna Latar Belakang: #750046
- Padding: 0px atas, 0px bawah
Perbarui Pengaturan Baris
Setelah pengaturan bagian selesai, buka pengaturan untuk baris dan perbarui pengaturan desain berikut:
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 100%
- Padding: 0px atas, 0px bawah
Penting untuk mengatur lebar talang menjadi 1 dan lebar menjadi 100% karena kita akan menggunakan satuan panjang vw untuk teks kita saat membuat desain topeng teks. Karena satuan panjang vw didasarkan pada lebar browser, penting bahwa wadah induk (bagian dan baris) memiliki lebar yang sama dengan browser yaitu 100%.
Perbarui Pengaturan Kolom 1
Topeng teks dan gambar kita akan ditambahkan ke kolom kiri (kolom 1). Kita perlu menambahkan warna latar belakang ke kolom sehingga mode campuran yang kita tambahkan ke gambar dan teks akan memadukan/mengungkapkan warna ini. Kita juga perlu mengatur overflow ke hidden sehingga ketika kita menganimasikan gambar pada scroll, kita tidak melihat gambar overflow di luar kolom.
Buka pengaturan untuk kolom 1 dan perbarui yang berikut ini:
- Warna Latar Belakang: #750046
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Membuat Masker Teks
Untuk membuat topeng teks, tambahkan modul teks ke kolom 1.
Isi Teks
Kemudian tambahkan kata "divi" ke konten tubuh. Kami menggunakan kata 4 huruf sehingga akan ditumpuk secara merata untuk desain persegi.
Latar Belakang Teks
Selanjutnya, tambahkan warna latar belakang putih ke modul teks.
- Warna Latar Belakang: #ffffff
Desain Teks
Kemudian, di bawah tab desain, perbarui yang berikut ini:
- Font Teks: Rubik Mono One
- Gaya Font Teks: TT
- Warna Teks Teks: #000000
- Teks Ukuran Teks: 25vw (desktop), 50vw (tablet dan telepon)
- Tinggi Baris Teks: 0.8em
- Perataan Teks: tengah
- Padding: 8vw atas, 8vw bawah
Mode Campuran Teks
Untuk menyelesaikan desain topeng teks, tambahkan mode campuran berikut:
- Mode Campuran: Layar
Sejauh ini, empat bahan utama untuk efek topeng teks ini adalah sebagai berikut:
- Latar Belakang Kolom
- Latar Belakang Teks Putih
- Teks Hitam
- Mode Campuran Layar pada Modul Teks
Mode campuran layar mengalikan lapisan dan menghasilkan versi campuran yang lebih ringan. Dengan mode campuran layar, teks hitam menjadi benar-benar transparan, mengungkapkan apa yang ada di belakangnya yang dalam hal ini adalah warna latar belakang.
Tambahkan Gambar Latar Belakang
Untuk menambahkan gambar latar belakang ke topeng teks, buat modul gambar baru dan unggah gambar berukuran kira-kira 1700px kali 2500px. Ukuran gambar penting agar gambar menutupi tinggi dan lebar kolom.
Desain Gambar
Kemudian perbarui pengaturan desain berikut:
- Paksa Lebar Penuh: YA
- Mode Campuran: Layar
Mode campuran ini tidak diperlukan untuk efek topeng teks, tetapi itu memadukan gambar dengan warna latar belakang sehingga lebih cocok dengan desain.
Posisi Gambar
Selanjutnya, berikan gambar posisi absolut dan perbarui Indeks Z sehingga berada di belakang modul teks.
- Posisi: Absolut
- Indeks Z: -1
Efek Gulir Gambar
Setelah desain gambar siap, buka tab lanjutan dan perbarui opsi efek gulir sebagai berikut:
Di bawah tab Gerak Vertikal,
- Offset Awal: -1 (pada 0%)
- Offset Tengah: 0 (pada 50%)
- Offset Akhir: 1 (pada 100%)
Di bawah tab Gerakan Horizontal,
- Offset Awal: -0,5 (pada 0%)
- Offset Tengah: 0 (pada 50%)
- Offset Akhir: 0,5 (pada 100%)
Di bawah tab Scaling Up dan Down,
- Skala Awal: 110% (pada 0%)
- Skala Menengah: 125% (pada 50%)
- Skala Akhir: 140% (pada 100%)
Hasil
Anda dapat menambahkan beberapa margin atas dan bawah ke bagian tersebut sehingga Anda dapat memeriksa hasilnya sejauh ini.
Membuat Teks Mock
Di kolom kanan, tambahkan modul teks baru.
Perbarui konten tubuh dengan yang berikut:
<h2>Lorem Ipsum Dolor Sit Amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
Kemudian perbarui pengaturan desain teks iklan berikut:
- Warna Teks: Cahaya
- Judul 2 Font: Rubik
- Judul 2 Ukuran Teks: 4vw
- Padding (desktop): 16vw atas, 5vw kiri, 5vw kanan
- Padding (tablet): 16vw atas, 16vw bawah, 5vw kiri, 5vw kanan
Hasil
Tweak Opsional
Latar Belakang Hitam / Teks Putih
Jika Anda ingin menggunakan latar belakang hitam untuk topeng teks, yang perlu Anda lakukan adalah memperbarui tiga opsi utama yang membentuk efek penyembunyian teks.
Buka pengaturan modul teks dan ubah yang berikut:
- Warna latar belakang: #000000 (hitam)
- Warna Teks Teks: #ffffff (putih)
- Mode Campuran: Kalikan
Dan inilah hasilnya…
PNG Rotasi
Dan Anda dapat mengubah gambar animasi menjadi yang memiliki latar belakang transparan (PNG) untuk efek keren lainnya. Berikut adalah contoh gambar PNG yang saya gunakan dengan menambahkan efek gulir berputar.
Hasil Akhir
Berikut adalah tampilan lain dari semua desain.
Pikiran Akhir
Mudah-mudahan, desain topeng teks dengan animasi latar belakang pada gulir ini akan memberikan keunggulan kreatif yang dibutuhkan situs Anda. Setelah Anda mengetahui bahan dasar untuk membuat efek penyamaran teks, Anda tidak akan kesulitan membuat versi tak terhitung dari desain ini yang sesuai dengan kebutuhan Anda.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!