Membuat animasi gulir latar belakang teks adalah cara unik untuk menambahkan tekstur animasi warna-warni ke teks Anda. situs jaringan saat pengguna menggulir halaman. Dengan Divi, prosesnya sangat mudah setelah Anda mempelajari beberapa teknik utama.
Dalam tutorial ini, kita hanya akan menggunakan kekuatan parameter bawaan dari Divi untuk membuat 3 desain unik yang menampilkan animasi bergulir latar belakang teks berwarna-warni. Kami bahkan akan menunjukkan cara membuat versi gelap dari setiap desain untuk tampilan yang benar-benar baru.
Mari kita mulai!
Kemungkinan Hasil
Berikut adalah desain yang akan kami buat hari ini.
Desain 1: Gradien latar belakang teks dengan efek gulir horizontal
Desain pertama ini akan menampilkan efek scrolling horizontal yang menganimasikan modul pemisah berwarna di belakang modul teks dengan filter layar.
Tambahkan kolom
Untuk memulai, tambahkan baris satu kolom ke bagian default.
Tambahkan modul teks
Kemudian tambahkan modul teks baru ke kolom.
Isi
untuk isi kolom, tempelkan kode HTML berikut ke dalam kotak isi:
Memformat teks
Kemudian perbarui desain teks sebagai berikut:
- Warna Latar Belakang: #ffffff
- Gaya Huruf Teks: TT
- Warna teks: # 000000
- Ukuran teks: 100 px (desktop), 40 px (telepon)
- Penspasian surat teks: 0.15em
- Tinggi baris teks: 1em
- Penyelarasan teks: pusat
- Font Judul: Merriweather
- Berat font judul: tebal
- Gaya font judul: TT
- Perataan Teks Tajuk: Tengah
- Warna Teks Tajuk: # 000000
- Ukuran Teks Header: 200px (Desktop), 80px (Telepon)
- Spasi huruf judul: 0.15em
- Tinggi baris judul: 1em
Padding dan filter
Sekarang kita perlu menambahkan beberapa padding dan filter layar ke modul teks. Filter diperlukan agar desain ini berfungsi karena filter inilah yang memungkinkan warna / mod latar belakang ditampilkan di belakang teks.
Untuk menambahkan isian dan filter, perbarui yang berikut ini:
- padding: tinggi 15px, rendah 20px
- Blend Mode: Layar
Catatan: Mode campuran layar berfungsi paling baik dengan teks hitam pada latar belakang putih. Jika kami ingin menggunakan teks putih pada latar belakang hitam, kami akan menggunakan mode campuran Multiply.
Pemisah atas dan bawah
Setelah modul teks kita selesai, mari kita tambahkan beberapa pemisah (di atas dan satu di bawah modul teks) untuk elemen desain tambahan.
Tambahkan pemisah yang lebih rendah
Tambahkan modul pemisahan baru di bawah modul teks.
Pengaturan pemisahan yang lebih tinggi
Buka pengaturan pemisah dan pilih TIDAK untuk menampilkan pemisah.
Kemudian perbarui latar belakang dan berikan pembagi mode campuran yang sama seperti modul teks sebagai berikut:
- Warna latar belakang gradien kiri: # 000000
- Warna latar belakang gradien di sebelah kanan: #ffffff
- Arah Gradien: 90deg
- Posisi Mulai: 48%
- Posisi Akhir: 0%
- Blend Mode: Layar
Kemudian perbarui ketinggian pembatas pada layar ponsel sebagai berikut:
- Tinggi: 15px (telepon)
Tambahkan pemisah atas
Untuk membuat pembatas atas, duplikat pembatas bawah sebelumnya dan seret ke atas modul teks menggunakan area tampilan lapisan.
Kemudian membalikkan warna pada latar belakang gradien.
Perbarui parameter garis
Setelah pemisah atas dan bawah kami di tempat, perbarui parameter garis sebagai berikut:
- Lebar selokan: 1 (untuk menghapus margin bawah antara modul)
- Lebar maksimum: 600 piksel (untuk menjaga desain yang koheren di desktop dan tablet)
- Penjajaran garis: tengah
- Padding: 0px tinggi, 0px rendah
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
Buat pemisah untuk warna latar belakang teks animasi
Elemen terakhir dari desain pertama ini adalah pembatas yang akan kita gunakan untuk menganimasikan warna latar belakang teks pada gulungan. Untuk melakukan ini, tambahkan modul pemisah baru di bawah pembatas bawah.
Kemudian pilih TIDAK untuk menampilkan pemisah.
Pengaturan pembatas latar belakang
Perbarui pemisah dengan latar belakang gradien sebagai berikut:
- Warna latar belakang gradien kiri: # e02b20
- Warna gradien latar kanan: # 8300e9
- Arah Gradien: 90deg
- Posisi Mulai: 30%
- Posisi Akhir: 70%
Kami ingin ketinggian pemisah cukup tinggi untuk mewarnai semua teks kami dalam modul teks dan pemisah atas dan bawah. Untuk desain ini, atur tinggi menjadi 400px.
- Tinggi: 400px
Kemudian berikan pembagi posisi absolut untuk memposisikannya tepat di atas modul lainnya. Gunakan indeks Z untuk menempatkan pemisah di belakang modul lainnya.
- Posisi: Mutlak
- Indeks Z: -1
Efek gulir pembatas latar belakang
Dengan pemisah di posisinya, yang harus kita lakukan hanyalah memindahkan pemisah ke belakang teks menggunakan efek gulir Divi. Untuk desain ini, kita cukup menambahkan gerakan horizontal pada scroll.
Perbarui item berikut:
Di bawah tab gerakan Horizontal ...
Biro
- Aktifkan gerakan horisontal: YES
- Mulai offset: 6 (20%)
- Offset rata-rata: 0 (pada 40% -60%)
- Offset akhir: -6 (pada 80%)
Telepon
- Mulai offset: 3
- End offset: -3
Selain itu, pastikan untuk mengatur pemicu efek gerakan di tengah klip:
- Pemicu Efek Gerak: Bagian Tengah Elemen
Tambahkan spasi bagian
Untuk membuat ruang gulir sementara untuk menguji desain, tambahkan berikut ini ke bagian:
- Margin: 80vh di atas, 80vh di bawah
final pikiran
Desain animasi latar belakang teks yang diperlihatkan dalam artikel ini sebenarnya berfungsi dengan baik sebagai desain statis tanpa menambahkan gerakan pada gulungan. Namun, efek pengguliran tambahan benar-benar membawa desain ke tingkat yang baru. Jangan ragu untuk bereksperimen dengan lebih banyak warna dan efek!
Saya menunggu kabar dari Anda di komentar.
Untuk kesehatanmu!
