Apakah Anda ingin menambahkan efek kemiringan dengan Divi pada setiap elemen halaman Anda?
Menambahkan efek kemiringan hover ke situs jaringan adalah salah satu cara yang menyenangkan dan menarik untuk membawa Anda situs jaringan Divi. Biasanya jenis desain ini membutuhkan plugin atau kode yang lebih canggih. Tapi, proses ini jauh lebih mudah menggunakan Tilt.js (sedikit efek kemiringan hover untuk jQuery). Dengan Tilt.js, Anda dapat dengan mudah menerapkan efek kemiringan melayang ke apa pun dalam hitungan menit.
Dalam tutorial ini, kami akan menunjukkan cara menambahkan efek kemiringan hover ke elemen apa pun Divi. Menggunakan kombinasi cuplikan jQuery tilt.js dan pembuat Divi, kami akan menunjukkan cara menambahkan efek kemiringan hover yang mengagumkan ke gambar, kolom modul, baris, dll.
Kami bahkan akan menunjukkan cara menambahkan efek paralaks 3D yang menakjubkan.
Mari kita mulai!
penelitian
Berikut adalah gambaran singkat dari hasil yang akan kita dapatkan dalam tutorial ini.
Lihat juga: Divi: Cara mengungkapkan konten saat mengarahkan kursor ke pembagi bagian
Apa yang Anda butuhkan untuk memulai
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Tambahkan efek kemiringan saat mengarahkan kursor ke elemen apa pun di Divi
Tambahkan efek Tilt Hover ke modul Divi
Mari kita mulai dengan menambahkan baris tiga kolom ke bagian reguler default.
Tambahkan modul Gambar
Di kolom pertama, tambahkan modul Gambar.
Catatan: Anda dapat menggunakan modul apa pun pilihan Anda. Itu tidak harus berupa modul Gambar sama sekali.
Unggah gambar pilihan Anda.
Tambahkan kelas modul Gambar
Di bawah tab Advanced, tambahkan kelas CSS berikut:
- Kelas CSS: et-js-tilt
Kelas ini akan digunakan sebagai selektor untuk fungsi kemiringan kita nanti.
Salin dan Tempel Modul Gambar Sebelumnya
Selanjutnya, salin modul Gambar dan tempel satu ke masing-masing dari dua kolom yang tersisa.
Anda dapat mengganti gambar duplikat dengan yang baru jika diinginkan. Pastikan setiap modul gambar milik kelas CSS “et-js-miring”.
Tambahkan perpustakaan JQuery "tilt.js"
Untuk menambahkan perpustakaan miring.js dan potongan kode yang diperlukan untuk mencondongkan gambar kita, kita akan menggunakan modul Kode.
Pertama, tambahkan baris baru satu kolom di bawah baris yang ada.
Kemudian tambahkan modul Kode ke baris baru.
Maka kita perlu mengakses perpustakaan tilt.js dengan menambahkan skrip yang mengimpor tilt.js dari CDN mereka (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Rekatkan skrip berikut ke dalam kotak kode.
Gunakan kode src berikut dalam tag skrip untuk mengimpor perpustakaan:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"Seharusnya terlihat seperti ini:
Penting untuk diimpor miring.js sebelum menambahkan kode yang akan menggunakannya. Jadi setelah skrip menunjuk ke miring.js, tambahkan tag skrip yang diperlukan untuk membungkus JQuery yang perlu kita tambahkan. Kemudian rekatkan JQuery berikut di antara tag skrip.
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Perhatikan bahwa fungsi tilt() berada di dalam pernyataan if yang akan berjalan saat lebar browser lebih besar dari 980px. Ini akan memastikan bahwa efeknya hanya terjadi pada komputer desktop.
Inilah hasilnya.
Menambahkan efek tilt hover ke garis
Seperti yang kami sebutkan sebelumnya, Anda dapat menambahkan efek kemiringan melayang ini ke elemen Divi mana pun. Ini termasuk seluruh baris.
Selain itu, Anda dapat menambahkan efek kemiringan ke baris sambil mempertahankan efek kemiringan untuk setiap modul di dalam baris.
Begini caranya.
Gandakan baris dan tambahkan kelas CSS unik ke baris
Gandakan baris gambar yang ada, lalu buka pengaturan baris duplikat. Di bawah tab Advanced, beri baris kelas CSS unik sebagai berikut:
- Kelas CSS: et-row-js-tilt
Tambahkan jQuery
Kemudian tambahkan jQuery berikut di bawah fungsi skew sebelumnya untuk menerapkan fungsi skew terpisah ke baris.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Perhatikan bahwa untuk efek kemiringan ini, kami telah mengurangi skala menjadi 1 dan meningkatkan nilai perspektif sehingga kemiringan lebih halus.
Inilah hasilnya.
Perhatikan bagaimana baris memiliki fitur kemiringan yang aktif saat Anda mengarahkan kursor ke baris dan masing-masing modul Gambar juga memiliki efek kemiringan yang sama yang kami tambahkan sebelumnya. Ini adalah bagaimana Anda dapat menerapkan contoh efek kemiringan bersarang.
Tambahkan efek Tilt Hover ke kolom dengan beberapa modul Divi
Dalam beberapa kasus, akan berguna untuk menambahkan efek miring ke kolom modul. Ini akan memungkinkan Anda untuk mendesain beberapa modul dalam kolom dengan Divi dan kemudian membuat semua elemen tersebut miring sebagai satu unit.
Untuk memberi Anda contoh bagaimana melakukan ini, kami akan menambahkan efek kemiringan saat mengarahkan kursor ke kolom yang berisi modul Gambar, modul Teks, dan modul Tombol.
Tambahkan baris baru
Untuk memulai, buat baris baru dengan struktur kolom berikut:
Tambahkan modul Gambar
Di dalam kolom 2 (kolom tengah), tambahkan modul Gambar baru.
Unggah gambar ke modul.
Atur perataan gambar ke tengah.
Tambahkan modul Teks
Di bawah modul Gambar, tambahkan modul Teks dengan header H2 berikut:
<h2>Local Organic</h2>
Selanjutnya, perbarui gaya heading H2 sebagai berikut:
- Font: Berkshire Swash
- Perataan Teks: Terpusat
- Warna Teks: #000000
- Ukuran: 60px
- Tinggi Garis: 1,2 em
Tambahkan Modul Tombol
Di bawah modul Teks, tambahkan modul Tombol.
Perbarui teks tombol untuk membaca "Pelajari lebih lanjut..."
Perbarui pengaturan personalisasi sebagai berikut:
- Penjajaran Tombol: Tengah
- Gunakan Gaya Kustom Untuk Tombol
- Ukuran Teks Tombol: 18px
- Warna Teks: #fff
- Latar Belakang Tombol: #000
- Lebar Batas Tombol: 0 piksel
- Radius Batas: 100px
- Font Tombol: Pasir hisap
- Berat Huruf: Tebal
- Padding (Atas dan Bawah): 16px
- Padding (Kiri dan Kanan): 30px
- Bayangan Kotak: lihat tangkapan layar
Parameter kolom
Setelah ketiga modul selesai, buka pengaturan untuk kolom induk dari modul tersebut (kolom 2) dan perbarui yang berikut:
- Latar belakang: #f5cee6
- Padding (Atas dan Bawah): 50px
- Padding (Kiri dan Kanan): 20px
Menambahkan kelas CSS ke kolom
Di bawah tab lanjutan, tambahkan kelas CSS berikut:
- Kelas CSS: et-column-js-tilt
Menambahkan jQuery untuk menerapkan efek kemiringan ke kolom
Untuk menambahkan efek skew ke kolom, kita dapat menambahkan potongan jQuery serupa lainnya yang menargetkan kolom Kelas CSS.
Tempelkan cuplikan kode berikut di bawah cuplikan kode sebelumnya yang menargetkan baris.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Inilah hasil akhirnya.
Menambahkan efek paralaks 3D ke internal
Untuk efek kemiringan hover yang lebih canggih, kita dapat menambahkan efek paralaks 3D ke modul kolom internal.
Menggunakan kombinasi perspektif dan transform:translateZ() , kita dapat membuat setiap modul kolom muncul dalam ruang 3D saat efek tilt-on-hover aktif.
Begini caranya.
Gandakan baris sebelumnya
Pertama, duplikat baris sebelumnya dengan efek miring ditambahkan ke kolom tengah.
Tambahkan kelas kolom tunggal
Kemudian perbarui kolom tengah (kolom 2) dengan kelas CSS unik sebagai berikut:
- Kelas CSS: et-column-js-tilt-3d
CSS khusus
Untuk memastikan bahwa modul internal mempertahankan efek 3D, tambahkan CSS khusus berikut ke elemen kolom utama:
transform-style: preserve-3d;
Tambahkan jQuery dan CSS
Selanjutnya, tambahkan beberapa cuplikan jQuery lagi di bawah cuplikan fungsi skew sebelumnya yang menargetkan kolom sebagai berikut:
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});jQuery ini menambahkan fungsi kemiringan dasar lainnya ke kolom, seperti contoh sebelumnya.
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
Sekarang lihat hasil akhirnya. Perhatikan bagaimana ketiga modul muncul dalam ruang 3D saat mereka berputar selama efek kemiringan.
Baca juga: Divi: Cara mengungkapkan konten saat mengarahkan kursor ke pembagi bagian
Hasil akhir
Berikut adalah tampilan lain pada hasil akhir untuk contoh kami.
Unduh DIVI sekarang!!!
Kesimpulan
Efek kemiringan hover yang ditawarkan oleh Tilt.js benar-benar menyenangkan untuk bereksperimen.
Meskipun kami telah menggunakan beberapa contoh dasar dalam tutorial ini, Anda dapat dengan mudah memiliki hari lapangan dengan menerapkan efek kemiringan melayang-layang ini ke salah satu tata letak yang telah dibuat sebelumnya atau ke situs Anda sendiri.
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 memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca 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.
...
