Apakah Anda ingin mendesain latar belakang Divi dianimasikan saat menggulir halaman berkat topeng dan pola? Tutorial ini untuk anda...
Menambahkan animasi gulir ke Divi dan topeng dan pola latar belakangnya adalah tip desain yang berguna yang dapat menghidupkan kembali desain latar belakang Anda. situs jaringan.
Dalam tutorial ini, kami akan menunjukkan cara membuat dan menganimasikan topeng dan pola latar belakang menggunakan opsi gulir Divi (tidak perlu kode khusus).
Untuk melakukan ini kita akan membuat layer background mengambang menggunakan garis Divi yang akan kita gunakan untuk menganimasikan topeng dan pola latar belakang saat pengguna menggulir suatu bagian isi.
Kami pikir Anda akan menyukai hasilnya.
Mari kita mulai!
penelitian
Berikut adalah ilustrasi singkat tentang tampilan animasi scroll latar belakang untuk tutorial ini.
Konsepnya
Konsep desain ini seharusnya tidak terlalu sulit untuk dipahami. Kami mulai dengan bagian yang memiliki latar belakang gradien.
Kemudian kami membuat garis yang diposisikan (absolut) sehingga benar-benar menutupi bagian tersebut (seperti overlay). Kita bisa menambahkan pola latar belakang ke baris.
Selanjutnya kita bisa menambahkan background mask ke kolom.
Lalu kita tambahkan efek gulir ke baris dan kolom (seperti skala dan rotasi) yang akan menganimasikan pola dan menutupi secara terpisah di latar belakang bagian.
Saat kita menyembunyikan luapan bagian, yang kita lihat hanyalah animasi yang ada di dalam bagian tersebut.
Mari kita mulai dengan membuat halaman dengan Divi Builder
Untuk memulai, Anda perlu melakukan hal berikut:
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik penggunaan Divi Pembangun
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Baca juga: Divi: Cara menggunakan "Gradient Builder" untuk mempercantik gambar Anda
Cara Membuat Masker dan Pola Latar Belakang Bergulir Animasi dengan Divi
Desain latar belakang bagian
Pertama, kita akan melewatkan pembuatan garis dan langsung mengedit bagian default yang ada di pembuat tema.
Untuk membuat desain latar belakang memenuhi browser, kita perlu menambahkan ketinggian vertikal ke bagian tersebut. Cara sederhana untuk melakukannya adalah dengan menambahkan ketinggian minimum ke bagian tersebut.
Buka pengaturan bagian. Di bawah tab Mendesain, perbarui tinggi minimum dan hapus padding sebagai berikut:
- Margin: 80 vh (Atas dan Bawah)
- Padding: 0px (Atas dan Bawah)
Merancang gradien latar belakang untuk bagian tersebut
Kami sekarang dapat menambahkan gradien latar belakang khusus ke bagian tersebut.
Untuk menambahkan pemberhentian gradien pertama, pastikan pengaturan bagian terbuka di bawah tab Konten. Kemudian pilih tab Gradien Latar Belakang dan klik untuk menambahkan gradien baru. Ini akan menambahkan dua warna gradien default. Tambahkan Gradient Stop berikut dengan warna dan posisi sebagai berikut:
- Gradien Berhenti:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Kemudian ubah arah gradien linier:
- Arah Gradien: 270 deg
Tambahkan baris ke bagian
Sekarang setelah bagian kita ada, tambahkan baris satu kolom ke bagian tersebut. Baris ini akan digunakan untuk background mask dan pattern scroll animation.
Selanjutnya, duplikat garis yang baru saja Anda buat. Baris kedua (yang diduplikasi) ini akan digunakan untuk baris kita isi seperti yang biasa Anda lakukan.
Anda sekarang harus memiliki baris teratas untuk animasi gulir latar belakang dan baris untuk isi Normal.
Sesuaikan garis
Sekarang kita telah menyiapkan gradien latar belakang bagian kita, kita dapat mengalihkan perhatian kita ke garis yang akan kita gunakan untuk animasi latar-gulir kita.
Buka pengaturan jalur. Di bawah tab Advanced, perbarui berikut ini:
- Posisi: Absolut
Ini akan memungkinkan garis tumpang tindih bagian tanpa mengambil ruang nyata dalam dokumen.
Sekarang yang perlu kita lakukan adalah memperbarui tinggi dan lebar sehingga lebar dan tinggi penuh dari bagian tersebut terbentang. Ini akan membuat hamparan yang kita butuhkan dan lapisan desain latar belakang kedua kita.
Di bawah tab Mendesain, perbarui opsi ukuran sebagai berikut:
- Tinggi Kolom Aquasize: YA
- Lebar: 100%
- Lebar Maks: 100%
- Tinggi: 100%
- Padding: 0px (Atas dan Bawah)
Sekarang Anda mungkin tidak dapat melihat garisnya, tetapi garis itu sekarang dengan sempurna menutupi latar belakang seluruh bagian.
Buat pola latar belakang untuk garis
Dalam contoh ini kita akan menambahkan pola Konfeti sebagai latar belakang garis.
Buka pengaturan jalur. Di bawah opsi Latar Belakang, pilih tab Pola Latar Belakang dan perbarui yang berikut:
- Pola Latar Belakang: Konfeti
- Pola :
- Warna: #f6bef7
- Ukuran: Ukuran Khusus
- Lebar: 35 vw
- Ulangi Asal: Tengah
REMARQUE : Menggunakan unit panjang VW memastikan bahwa pola akan diskalakan dengan browser, menjaga desain tetap konsisten dan responsif.
Tambahkan Efek Gulir ke Baris
Sekarang setelah pola latar belakang kita ada, kita dapat menambahkan efek gulir ke garis.
Buka tab Advanced. Di bawah opsi Gulir Efek, perbarui berikut ini:
Pilih tab Gerak Horisontal dan perbarui yang berikut:
- Aktifkan Gerakan Horizontal: YA
- Mulai Offset: 0,5 (pada 0%)
- Mid Offset: 0 (dari 40% hingga 60%)
- Offset Akhir: -0,5 (pada 100%)
Ini akan memindahkan pola latar belakang garis mulai 50 piksel ke kiri dan berakhir 50 piksel ke kanan.
Pilih tab "Scale Up and Down" dan perbarui yang berikut ini:
- Aktifkan Penskalaan Naik dan Turun: YA
- Skala Awal: 150% (pada 0%)
- Skala Menengah: 100% (dari 40% hingga 60%)
- Skala Akhir: 150% (pada 100%)
Ini akan menskalakan pola latar belakang baris saat menggulir.
Pilih tab « Rotating » dan perbarui yang berikut:
- Aktifkan Berputar: YA
- Rotasi Awal: 10 derajat (pada 0%)
- Rotasi Tengah: 0 derajat (dari 40% hingga 60%)
- Rotasi Akhir: -10 derajat (pada 100%)
TIPS KUNCI: Anda harus menjaga rotasi seminimal mungkin atau Anda berisiko menunjukkan celah di mana garis tidak melewati bagian tersebut. Aturan praktis yang baik adalah meningkatkan skala jika Anda ingin meningkatkan rotasi. Ini akan memungkinkan garis untuk berputar di atas bagian tanpa memperlihatkan tepinya.
Tambahkan topeng latar belakang dengan efek gulir ke kolom
Setelah baris kita selesai, kita siap untuk menambahkan background mask dengan efek scroll ke kolom pada baris yang sama. Untuk memulai, mari tambahkan background mask.
Untuk melakukan ini, buka pengaturan kolom. Di bawah tab Topeng Latar Belakang, perbarui berikut ini:
- Topeng: Lapisan Gumpalan
- Warna: #ffffff
- Transformasi Topeng: Flip Horizontal, Pembalikan
Tambahkan efek gulir ke kolom
Sekarang topeng latar belakang kita sudah terpasang, kita dapat menambahkan efek gulir ke kolom. Perlu diingat bahwa kolom sudah memiliki efek bergulir yang diwarisi dari baris induk.
Semua yang akan kita lakukan adalah memutar kolom ke arah yang berlawanan dari baris untuk mendapatkan lebih banyak pemisahan topeng dan pola selama durasi gulungan.
Buka tab Advanced. Di bawah pilihan Gulir Efek, pilih tab Rotasing dan perbarui yang berikut ini:
- Aktifkan Berputar: YA
- Rotasi Awal: -15 derajat (pada 0%)
- Rotasi Tengah: 0 derajat (dari 40% hingga 60%)
- Rotasi Akhir: 15 derajat (pada 100%)
Sembunyikan luapan bagian
Saat ini, garis tetap terlihat setiap kali pengguliran menyebabkannya melampaui bagian tersebut.
Untuk membersihkan ini, kita perlu menyembunyikan bagian luapan. Untuk melakukan ini, buka pengaturan bagian. Di bawah tab Advanced, perbarui opsi visibilitas sebagai berikut:
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Sekarang terlihat lebih baik.
Lihat juga: Divi: 12 kombinasi topeng dan pola latar belakang
Menambahkan konten ke baris yang dibuat untuk tujuan ini
Pada titik ini, background mask dan pattern scroll animation sudah selesai. Yang harus kita lakukan adalah menambahkan konten yang kita inginkan ke baris yang kita buat sebelumnya untuk konten tersebut.
Untuk contoh ini, kami telah menambahkan judul dummy sehingga kami dapat melihat seperti apa animasi latar belakang dengan teks statis.
Hasil akhir
Mari kita lihat hasil akhir dari desain kita.
Unduh DIVI sekarang!!!
Kesimpulan
Sungguh menakjubkan betapa mudahnya membuat latar belakang yang begitu indah dengan opsi latar belakang Divi. Selain itu, menambahkan animasi dengan efek gulir Divi menghadirkan kehidupan baru pada desain ini.
Untuk tampilan yang berbeda, Anda dapat mencoba berbagai topeng dan pola pada setiap lapisan. Jika Anda ingin lebih banyak inspirasi tentang cara menggunakan topeng dan pola latar belakang, periksa ini 12 topeng latar belakang dan kombinasi pola
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
