Cara Membuat Animasi Gulir Latar Belakang Teks Berwarna-warni dengan Divi

Membuat animasi gulir latar belakang teks adalah cara unik untuk menambahkan tekstur bergerak berwarna-warni ke teks di situs web Anda saat pengguna menggulir halaman ke bawah. Dengan Divi, prosesnya sangat mudah setelah Anda mempelajari beberapa teknik utama.

Dalam tutorial ini, kita tidak akan menggunakan apa pun selain kekuatan pengaturan bawaan Divi untuk membuat 3 desain unik yang menampilkan animasi gulir latar belakang teks berwarna-warni. Kami bahkan akan menunjukkan cara membuat versi gelap dari setiap desain untuk tampilan dan nuansa yang sama sekali baru.

Mari kita mulai!

Sneak Peek

Berikut adalah sekilas desain yang akan kita buat hari ini.

Unduh Tata Letak Animasi Gulir Latar Belakang Teks 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.

Desain 1: Gradien Latar Belakang Teks dengan Efek Gulir Horizontal

Desain pertama ini akan menampilkan efek gulir horizontal yang menjiwai modul pembagi warna-warni 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 konten kolom, rekatkan HTML berikut ke dalam kotak konten:

Desain Teks

Kemudian perbarui desain teks sebagai berikut:

• Warna Latar Belakang: #ffffff
• Gaya Font Teks: TT
• Warna Teks Teks: #000000
• Ukuran Teks Teks: 100px (desktop), 40px (ponsel)
• Spasi Surat Teks: 0.15em
• Tinggi Baris Teks: 1em
• Perataan Teks: Tengah

• Font Judul: Merriweather
• Berat Huruf Judul: Tebal
• Gaya Font Judul: TT
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 200px (desktop), 80px (ponsel)
• Spasi Surat Judul: 0.15em
• Tinggi Garis Pos: 1em

Padding dan Filter

Sekarang kita perlu menambahkan sedikit padding dan filter layar ke modul teks. Filter diperlukan agar desain ini berfungsi karena itulah yang memungkinkan warna/modul latar belakang ditampilkan di belakang teks.

Untuk menambahkan padding dan filter, perbarui yang berikut ini:

• padding: atas 15px, bawah 20px
• Mode Campuran: Layar

Catatan: Mode perpaduan layar berfungsi paling baik dengan teks hitam dengan latar belakang putih. Jika kita ingin menggunakan teks putih pada latar belakang hitam, kita akan menggunakan mode campuran Multiply.

Pembagi Atas dan Bawah

Setelah modul teks kita selesai, mari tambahkan beberapa pembagi (di atas dan satu di bawah modul teks) untuk elemen desain tambahan.

Tambahkan Pembagi Bawah

Tambahkan modul pembagi baru di bawah modul teks.

Pengaturan Pembagi Teratas

Buka pengaturan pembagi dan pilih TIDAK untuk menampilkan pembagi.

Kemudian perbarui latar belakang dan berikan pembagi mode campuran yang sama dengan modul teks sebagai berikut:

• Warna Kiri Latar Belakang Gradien: #000000
• Warna Kanan Latar Belakang Gradien: #ffffff
• Arah Gradien: 90 derajat
• Posisi Awal: 48%
• Posisi Akhir: 0%
• Mode Campuran: Layar

Kemudian perbarui ketinggian pembagi pada tampilan ponsel sebagai berikut:

• Tinggi: 15px (ponsel)

Tambahkan Pembagi Atas

Untuk membuat pembagi atas, duplikat pembagi bawah sebelumnya dan seret ke atas modul teks menggunakan kotak tampilan lapisan.

Kemudian balikkan warna pada latar belakang gradien.

Perbarui Pengaturan Baris

Setelah pembagi atas dan bawah kami terpasang, perbarui pengaturan baris sebagai berikut:

• Lebar Talang: 1 (untuk menghilangkan margin bawah antar modul)
• Max Width: 600px (untuk menjaga desain yang konsisten di desktop dan tablet)
• Penjajaran Baris: Pusat
• Padding: 0px atas, 0px bawah
• Luapan Horisontal: tersembunyi
• Overflow Vertikal: tersembunyi

Buat Pembagi untuk Warna Latar Belakang Teks Animasi

Elemen terakhir untuk desain pertama ini adalah pembatas yang akan kita gunakan untuk menganimasikan warna background teks pada scroll. Untuk melakukan ini, tambahkan modul pembagi baru di bawah pembagi bawah.

Kemudian pilih TIDAK untuk menunjukkan pembagi.

Pengaturan Pembagi Latar Belakang

Perbarui pembagi dengan latar belakang gradien sebagai berikut:

• Warna Kiri Latar Belakang Gradien: #e02b20
• Warna Kanan Latar Belakang Gradien: #8300e9
• Arah Gradien: 90 derajat
• Posisi Awal: 30%
• Posisi Akhir: 70%

Kami ingin mengatur ketinggian pembagi menjadi cukup tinggi untuk mewarnai semua teks kami di modul teks dan pembagi atas dan bawah. Untuk desain ini, atur tingginya menjadi 400px.

• Tinggi: 400px

Kemudian berikan pembagi posisi absolut untuk memposisikannya langsung di atas modul lainnya. Gunakan Indeks Z untuk membuat pembagi berada di belakang modul lainnya.

• Posisi: Absolut
• Indeks Z: -1

Efek Gulir Pembagi Latar Belakang

Dengan posisi pembagi, yang harus kita lakukan adalah memindahkan pembagi di belakang teks menggunakan efek gulir Divi. Untuk desain ini, kita hanya akan menambahkan gerakan horizontal pada scroll.

Perbarui berikut ini:

Di bawah tab Gerakan Horizontal…

Desktop

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

Telepon

• Mulai Offset: 3
• Offset Akhir: -3

Pastikan untuk mengatur pemicu efek gerakan ke tengah elemen juga:

• Pemicu Efek Gerak: Elemen Tengah

Tambahkan Spasi Bagian

Untuk membuat ruang gulir sementara untuk menguji desain, tambahkan berikut ini ke bagian:

• Margin: 80vh atas, 80vh bawah

Hasil

Berikut adalah hasil akhir dari desain pertama.

Desain 2: Gradien Latar Belakang Teks dengan Efek Gulir Berputar

Untuk desain kedua ini, kita akan membuat latar belakang gradien berputar untuk teks. Kami juga akan menambahkan elemen fading in dan out.

Bagian Duplikat

Untuk membuat desain berikutnya, duplikat seluruh bagian yang menampilkan desain pertama yang kita buat.

Pengaturan Pembagi Latar Belakang

Kemudian perbarui pengaturan untuk Divider yang digunakan untuk latar belakang teks sebagai berikut:

• Lebar: 600px (desktop), 300px (ponsel)
• Tinggi: 600px (desktop), 300px (ponsel)

Kemudian perbarui sudut membulat sebagai berikut:

• Sudut Bulat: 50%

Ini akan memberi pembagi bentuk lingkaran yang kita inginkan untuk efek gulir rotasi yang akan kita tambahkan ke pembagi.

Selanjutnya sesuaikan offset vertikal untuk memposisikan lingkaran di belakang konten teks sebagai berikut:

• Offset Vertikal: -100px (desktop), -50px (ponsel)

Pembaruan Pembagi Atas dan Bawah

Setelah pembagi terpasang, perbarui latar belakang pembagi atas sebagai berikut:

• Warna Kanan Latar Belakang Gradien: transparan

Kemudian perbarui latar belakang pembagi bawah sebagai berikut:

• Warna Kiri Latar Belakang Gradien: transparan

Perbarui Efek Gulir Pembagi Latar Belakang

Setelah pembagi atas dan bawah diperbarui, kita perlu menambahkan efek gulir baru ke pembagi latar belakang. Buka pengaturan untuk pembagi latar belakang dan perbarui yang berikut ini:

Di bawah tab Fading In and Out …

• Aktifkan Fading In and Out: YA
• Mid Opacity: 100% (pada 40%-60%)
• Akhir Opacity: 0%

Di bawah tab Scaling Up and Down …

• Aktifkan Penskalaan Naik dan Turun: YA
• Skala Awal: 105%
• Skala Menengah: 115%
• Skala Akhir: 105%

Di bawah tab Rotating …

• Aktifkan Rotasi: YA
• Rotasi Mulai: 360 derajat
• Rotasi Akhir: -360deg

Pastikan untuk menonaktifkan efek Horizontal Motion juga.

Hasil

Berikut adalah hasil dari desain 2.

Desain 3: Latar Belakang Teks dengan Beberapa Lingkaran Bergerak

Untuk desain ketiga dan terakhir ini, kita akan menambahkan beberapa pembatas melingkar yang bergerak di belakang teks untuk animasi yang indah saat menggulir.

Duplikat Bagian 2

Untuk melakukannya, duplikat dulu bagian tersebut.

Pembaruan Pembagi Atas dan Bawah

Kemudian buka pengaturan untuk pembagi atas di bagian baru/ketiga dan tambahkan warna hitam kembali ke latar belakang gradien sebagai berikut:

• Warna Kanan Latar Belakang Gradien: #000000

Buka pengaturan untuk pembagi bawah dan perbarui latar belakang juga.

• Warna Kiri Latar Belakang Gradien: #000000

Membuat Pembagi Latar Belakang 1

Pembagi latar belakang pertama sudah ada dari desain sebelumnya, kita akan membuatnya lebih kecil dan menganimasikannya secara berbeda.

Pengaturan Pembagi Latar Belakang 1

Buka pengaturan untuk pembagi latar belakang dan perbarui yang berikut ini:

• Lebar: 250px (desktop dan tablet), 125px (ponsel)
• Tinggi: 250px (desktop dan tablet), 125px (ponsel)
• Offset Vertikal: 0px (desktop, tablet, dan ponsel)

Pembagi Latar Belakang 1 Efek Gulir

Kemudian reset efek transformasi yang ditransfer dari desain sebelumnya dengan mengklik kanan pada grup opsi efek gulir dan memilih "Reset Scroll Transform Effects".

Sekarang kita dapat menambahkan efek gulir baru sebagai berikut:

Di bawah tab Gerak Vertikal…

Desktop

• Aktifkan Gerakan Vertikal: YA
• Mulai Offset: -2
• Offset Tengah: 2 (pada 60%)
• Offset Akhir: 4

Telepon

• Mulai Offset: -1
• Offset Tengah: 1 (pada 60%)
• Offset Akhir: 2

Di bawah tab Gerakan Horizontal…

• Aktifkan Gerakan Horizontal: YA
• Mulai Offset: 0
• Mid Offset: 2 (pada 45%-65%)
• Offset Akhir: 0 (pada 80%)

Membuat Pembagi Latar Belakang 2

Untuk membuat pembagi latar belakang kedua, duplikat pembagi latar belakang pertama.

Pembagi Latar Belakang 2 Pembaruan

Latar belakang

Kemudian buka pengaturan untuk pembagi latar belakang kedua/duplikat dan perbarui warna latar belakang berikut:

• Warna Kiri Gradien Latar Belakang: rgba(224.153,0,0.9)
• Warna Kanan Gradien Latar Belakang: rgba(255,243,71,0.9)

Ukuran

Kemudian perbarui ukurannya sebagai berikut:

• Lebar: 300px (desktop dan tablet), 150px (ponsel)
• Tinggi: 300px (desktop dan tablet), 150px (ponsel)

Efek Gulir

Kemudian perbarui efek gulir sebagai berikut:

Di bawah tab Gerak Vertikal…

Desktop

• Mulai Offset: 5
• Offset Tengah: 0
• Offset Akhir: -5

Telepon

• Mulai Offset: 2
• Offset Tengah: 0
• Offset Akhir: -2

Di bawah tab Gerakan Horizontal…

Desktop

• Mulai Offset: 0
• Offset Tengah: 3
• Offset Akhir: 2

Telepon

• Offset Tengah: 1,5
• Offset Akhir: -1

Membuat Pembagi Latar Belakang 3

Untuk membuat pembagi latar belakang ketiga dan terakhir, duplikat pembagi latar belakang 2.

Pembagi Latar Belakang 3 Pembaruan

Latar belakang

Kemudian perbarui warna gradien latar belakang sebagai berikut:

• Warna Kiri Gradien Latar Belakang: rgba(124,218,36,0.9)
• Warna Kanan Gradien Latar Belakang: rgba(12.113.195,0.9)

Ukuran

Kemudian perbarui ukurannya sebagai berikut:

• Lebar: 200px (desktop dan tablet), 100px (ponsel)
• Tinggi: 200px (desktop dan tablet), 100px (ponsel)

Efek Gulir

Kemudian perbarui efek gulir sebagai berikut:

Di bawah tab Gerak Vertikal…

• Mulai Offset: 0
• Offset Tengah: 0
• Offset Akhir: 4

Di bawah tab Gerakan Horizontal…

Desktop

• Offset Awal: 6 (pada 20%)
• Offset Tengah: 0 (pada 40%-60%)
• Offset Akhir: 6 (pada 80%)

Telepon

• Mulai Offset: 3
• Offset Akhir: 3

Berikut adalah hasil akhir dari desain 3.

Hasil Akhir

Sekarang mari kita lihat hasil akhir untuk ketiga desain tersebut.

Dan inilah desain di ponsel.

Versi Gelap

Untuk membuat versi gelap dari desain ini, Anda perlu mengganti warna putih yang digunakan untuk hitam dan juga mengganti warna hitam yang digunakan untuk putih. Kemudian gunakan mode campuran Multiply untuk modul teks dan pembagi atas dan bawah.

Berikut cara melakukannya untuk desain 3.

Pertama, ubah latar belakang bagian menjadi hitam.

Kemudian perbarui pengaturan modul teks sebagai berikut:

• Warna Latar Belakang: #000000
• Warna Teks Teks: #ffffffff
• Warna Teks Judul: #ffffff
• Mode Campuran: Kalikan

Inilah hasilnya.

Dan inilah sisa desain yang akan terlihat dengan versi gelap yang diterapkan.

Pikiran Akhir

Desain animasi latar belakang teks yang ditampilkan dalam artikel ini akan benar-benar berfungsi dengan baik sebagai desain statis tanpa gerakan tambahan saat menggulir. Namun, efek gulir tambahan benar-benar membawa desain ke tingkat yang sama sekali baru. Jangan ragu untuk bereksperimen dengan lebih banyak warna dan efek!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!