Cara Menggabungkan Efek Arahkan Arah dengan Latar Belakang Parallax CSS di Divi
Diterbitkan: 2019-08-30Menggunakan CSS Parallax dengan Background Images di Divi memungkinkan kita untuk membuat efek hover yang sangat unik. Parallax adalah salah satu dari banyak cara kita dapat menambahkan kehidupan ke situs web kita. Dan saat menggabungkan paralaks dengan beragam pilihan hover Divi, kami membuat konten menjadi lebih hidup.
Dalam tutorial ini, kami akan menunjukkan bahwa Anda dapat dengan cepat dan mudah mendesain efek hover latar belakang paralaks CSS yang unik di Divi. Tidak diperlukan plugin atau pengkodean khusus!
Mari kita mulai.
Sneak Peek
Berikut ini sekilas tentang efek hover latar belakang paralaks css yang akan kita rancang 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 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 harus memiliki yang berikut:
- Tema Divi diinstal dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
- Gambar yang akan digunakan untuk konten tiruan
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Bagian 1: Membuat Efek Terobosan Parallax Hover di Divi
Pertama, buat bagian reguler dengan satu baris kolom. 
Sebelum menambahkan modul, buka pengaturan bagian dan tambahkan gambar latar belakang menggunakan paralaks CSS.
Pastikan lebar gambar minimal 1920px. Desainnya bekerja dengan baik dengan gambar latar belakang yang lebih gelap dengan banyak tekstur. Saya menggunakan salah satu dari Paket Tata Letak Kedai Kopi kami yang tersedia dari Divi Builder.
Kemudian tambahkan beberapa padding ke bagian sebagai berikut:
Padding: 10vw atas, 10vw bawah
Tambahkan Modul Blurb
Setelah latar belakang dan bantalan bagian berada di tempatnya, tambahkan modul uraian ke baris.
Kemudian perbarui konten uraian dengan beberapa kalimat teks isi. Anda dapat menyimpan judul default di sana.
Kemudian klik untuk menggunakan ikon dan pilih ikon kopi untuk uraian.
Setelah konten siap, perbarui pengaturan desain sebagai berikut:
Warna Ikon: #ffffff
Ukuran Font Ikon: 50px
Perataan Teks: tengah
Judul Font: Oswald
Judul Gaya Font TT
Warna Teks Judul: #ffffff
Spasi Huruf Judul: 2px
Font Tubuh: Nunito
Warna Teks Tubuh: #ffffff
Spasi Huruf Tubuh: 1px
Padding: atas 30px, bawah 30px, kiri 30px, kanan 30px
Sesuaikan Lebar Baris
Setelah uraian dirancang, lompat ke pengaturan baris dan sesuaikan lebar maksimal.
Lebar Maks: 80%
Pengaturan Kolom
Untuk contoh ini, kita akan mengaktifkan efek hover di level kolom. Ini memungkinkan Anda untuk menggunakan beberapa modul untuk membangun konten, meskipun kami hanya menggunakan satu modul uraian untuk saat ini.
Agar efek hover paralaks ini berfungsi, kita perlu menambahkan gambar latar belakang yang sama ke kolom yang kita gunakan di bagian kita. Kita juga perlu menggunakan metode paralaks CSS yang sama pada gambar latar kolom juga.
Buka pengaturan kolom dan tambahkan gambar latar belakang yang sama menggunakan paralaks CSS.
Anda tidak akan dapat melihat perbedaan apa pun antara gambar latar kolom dan gambar latar bagian karena keduanya menggunakan paralaks CSS yang pada dasarnya memperbaiki gambar di tempat yang sama persis di halaman web. Namun, Anda akan melihat perbedaannya setelah efek hover diterapkan.
Lanjutkan untuk memperbarui pengaturan desain kolom sebagai berikut:
Padding: 4vw atas, 4vw bawah
Sudut Bulat: 10px
Kemudian beri kolom bayangan kotak yang hanya muncul di hover sebagai berikut:
Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Kabur Bayangan Kotak: 36px
Warna Bayangan (default): rgba(0,0,0,0)
Warna Bayangan (arahkan kursor): rgba(0,0,0,0.72)
Sekarang mari masuk ke opsi transformasi dan perbarui gaya transformasi berikut saat mengarahkan kursor:
Skala Transform (arahkan kursor): 105%
Ini akan memperbesar kolom (dan isinya) sedikit untuk menciptakan efek sedikit keluar dari gambar latar belakang.
Transformasi Terjemahkan Sumbu Y (arahkan kursor): -2,5%
Ini memindahkan kolom sedikit ke atas saat melayang untuk membuat sedikit perpindahan asimetris.
Transform Origin: 100% 50% (tengah bawah)
Ini memulai efek penskalaan dari asal tengah bawah yang, bila dikombinasikan dengan nilai terjemahan, menyerupai efek engsel halus.
Inilah efek hover paralaks css sejauh ini.
Sekarang buka pengaturan baris dan duplikat kolom dua kali untuk membuat total tiga kolom masing-masing dengan efek blurb dan hover yang sama.
Hasil Akhir
Berikut adalah desain akhir. Perhatikan bagaimana gambar latar belakang paralaks disembunyikan secara default saat menggulir halaman ke bawah. Kemudian mereka muncul saat mengarahkan kursor ke setiap kolom saat mereka muncul. Anda juga dapat melihat paralaks masih berfungsi pada kolom saat menggulir halaman ke bawah sambil mengarahkan kursor ke kolom. Ini adalah efek hover yang halus, namun sangat unik.
Menambahkan Rotasi ke Efek Hover
Kami juga dapat menambahkan rotasi ke efek hover paralaks css yang menambahkan sentuhan yang bagus pada desain. Cukup buka setiap pengaturan kolom dan perbarui yang berikut:
Transform Rotate Z Axis (saat melayang): 5deg
Jika Anda ingin mencampurnya, Anda dapat memberikan rotasi -5 derajat pada kolom tengah.
Berikut adalah hasil akhirnya.
Dan di sini adalah desain yang sama dengan gambar latar yang lebih terang dan teks yang lebih gelap.
Part 2: Membuat Efek Parallax Hover Kaca Pembesar di Divi
Gandakan bagian dari desain pertama lalu buka pengaturan bagian dan ganti gambar latar belakang dengan yang baru. Saya menggunakan salah satu dari Paket Tata Letak Video Game kami karena ini benar-benar menyoroti efek hover paralaks pembesaran.
Perbarui Pengaturan Baris
Kita akan membutuhkan ruang ekstra untuk desain ini, jadi buka pengaturan baris dan perbarui yang berikut:
Lebar Talang: 1
Lebar: 100%
Lebar Maks: 98%
Setelah itu, lompat ke tab konten dan hapus dua kolom sehingga hanya satu yang tersisa.
Pengaturan Kolom
Untuk desain ini, kita perlu menerapkan efek hover di level modul alih-alih level kolom, jadi kita perlu mengatur ulang gaya default untuk kolom. Untuk melakukannya, klik kanan pada item kolom dan pilih "reset gaya item".
Perbarui Modul Blurb
Setelah pengaturan kolom dikembalikan ke gaya default, buka pengaturan modul uraian dan tambahkan gambar latar belakang paralaks css yang sama yang ditambahkan ke bagian.
Perekat
Untuk membuat modul melingkar, pertama-tama kita perlu memberikan lebar dan tinggi yang cocok sebagai berikut:
Lebar: 300px
Penyelarasan Modul: tengah
Tinggi: 300px
Berbatasan
Untuk melengkapi efek melingkar, kita perlu memperbarui sudut membulat dan memberikan sedikit batas.
Sudut Bulat: 50%
Lebar batas: 1px
Warna Perbatasan: rgba (255,255,255,0.12)
Efek Arahkan Bayangan Kotak
Selanjutnya, beri blurb bayangan kotak di hover sebagai berikut:
Bayangan Kotak: lihat tangkapan layar
Kekuatan Kabur Bayangan Kotak: 36px
Warna Bayangan (default): rgba(0,0,0,0)
Warna Bayangan (arahkan kursor): rgba(0,0,0,0.7)
Transformasi Efek Arahkan
Setelah bayangan kotak Anda terpasang, perbarui opsi transformasi sebagai berikut:
Transform Origin (default): 50% 0% (kiri tengah)
Ini akan memastikan uraian singkat tidak akan meluas ke luar halaman setelah ditempatkan di paling kiri dari tiga baris kolom.
Skala Transform (arahkan kursor): 130%
Ini akan memperbesar uraian dan benar-benar memperbesar gambar latar belakang paralaks untuk efek hover yang keren.
Gandakan Kolom
Setelah uraian selesai, kita dapat menduplikasi kolom untuk membuat tiga kolom, masing-masing dengan modul uraian yang sama.
Buka pengaturan baris dan duplikat kolom dua kali untuk total tiga kolom.
Perbarui Transform Asal
Karena semua modul uraian kami memiliki asal transformasi yang disetel ke "kiri tengah", kami perlu menyesuaikan ini untuk uraian di kolom tengah dan kanan sehingga mereka menskala dari posisi yang sesuai.
Buka pengaturan untuk modul uraian di kolom 2 dan perbarui yang berikut:
Transform Origin: 50% 50% (tengah tengah)
Kemudian buka pengaturan untuk modul uraian di kolom 3 dan perbarui yang berikut:
Transform Origin: 50% 100% (kanan tengah)
Hasil Akhir
Sekarang lihat hasil akhirnya. Perhatikan bagaimana efeknya benar-benar memperbesar gambar latar belakang paralaks css di belakang uraian. Dan saat Anda menggulir ke bawah sambil mengarahkan kursor ke blurb, itu terlihat seperti efek kaca pembesar.
Sebenarnya, ini sangat keren sehingga kami mungkin ingin membiarkannya sebagai gaya default, bukan hanya dalam keadaan melayang.
Pikiran Akhir
Saya harap contoh dalam posting ini membuat jus kreatif Anda mengalir sedikit sehingga Anda dapat menjelajahi desain yang lebih keren dan efek hover untuk digabungkan dengan paralaks css. Proses penyiapannya sangat sederhana, tetapi kemungkinannya tampaknya tidak terbatas.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!