Cara Menambahkan Efek Gulir ke Bawah untuk Mempratinjau Desain Halaman Web di Divi

Baik itu di halaman portofolio atau galeri gambar, desainer web perlu memamerkan desain mereka kepada klien sebagai bagian penting dalam mendorong bisnis. Dan, sering kali, contoh pekerjaan mereka ini menyertakan gambar dari seluruh desain halaman web yang dapat memakan banyak ruang. Itu sebabnya menambahkan efek gulir ke bawah pada gambar-gambar ini dapat membedakan portofolio Anda. Ini memungkinkan pengguna untuk melihat bagian desain yang ringkas pada awalnya. Tetapi ketika pengguna mengarahkan kursor ke gambar, gambar akan bergulir untuk mengungkapkan sisa desain secara perlahan seolah-olah mereka sedang menggulir ke bawah halaman web. Anda dapat melihat jenis efek ini digunakan di halaman Divi Layout Packs kami sendiri.

Dalam tutorial ini, saya akan menunjukkan cara menggunakan Divi untuk menambahkan efek gulir ke bawah pada gambar yang memungkinkan pengguna untuk melihat pratinjau desain halaman web. Ini adalah elemen interaktif elegan yang menurut saya akan Anda sukai.

Sneak Peek

Berikut adalah preview dari efek scroll down hover yang akan kita buat bersama dalam tutorial ini.

Unduh Tata Letak Efek Gulir Ke Bawah Secara GRATIS

Untuk meletakkan tangan Anda pada contoh ini gulir ke bawah desain efek hover, Anda harus terlebih dahulu mengunduhnya menggunakan tombol di bawah ini. 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.

Sekarang mari kita ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk tutorial use case ini, kita akan membangun desain kita dari awal menggunakan Divi. Anda juga memerlukan beberapa gambar/tangkapan layar untuk digunakan pada item portofolio. Saya akan menyarankan menggunakan gambar yang lebarnya setidaknya 1080px.

Membuat Baris Tiga Kolom

Jika Anda belum melakukannya, buat halaman baru. Kemudian beri judul halaman Anda dan gunakan pembuat Divi di ujung depan. Kemudian buat bagian baru dengan baris tiga kolom.

Perbarui pengaturan baris sebagai berikut:

Lebar Kustom: 100%
Padding Kustom (desktop): 5% kiri, 5% kanan
Padding Kustom (tablet): 25% kiri, 25% kanan
Padding Kustom (telepon): 15% kiri, 15% kanan

Selanjutnya, kita perlu menambahkan cuplikan CSS khusus berikut ke setiap elemen utama kolom. Di bawah tab lanjutan, tambahkan CSS berikut:

Kolom 1 Elemen Utama CSS:

overflow: hidden;
height: 400px;

Kolom 2 Elemen Utama CSS:

overflow: hidden;
height: 400px;

Kolom 3 Elemen Utama CSS:

overflow: hidden;
height: 400px;

Perhatikan tinggi masing-masing kolom adalah 400px. Ini pada akhirnya akan berfungsi sebagai ketinggian area pandang dari gambar yang akan digulir saat mengarahkan kursor. Properti "overflow: hidden" akan memastikan bagian gambar yang dipindahkan ke luar kolom (saat dilayangkan) tetap tersembunyi. Ini akan lebih masuk akal setiap kali kita menambahkan efek transformasi hover ke gambar.

Membuat Gambar dengan Scroll Down Hover Effect

Sekarang kita siap untuk mulai membuat gambar kita dengan efek gulir ke bawah. Ini sangat sederhana jika Anda memahami cara kerja efeknya. Pada dasarnya, semua yang akan kita lakukan adalah menambahkan gambar dan kemudian menggunakan properti transform translate untuk memindahkan gambar ke atas sebesar 100% saat mengarahkan kursor. Kemudian untuk memastikan gambar berhenti di posisi yang tepat, kita perlu menambahkan margin atas yang sama dengan tinggi kolom saat dilayangkan. Ini akan memastikan gambar berhenti bergulir pada titik yang tepat di bagian bawah gambar yang terlihat.

Berikut cara melakukannya.

Tambahkan modul gambar ke kolom 1. Kemudian tambahkan opsi hover berikut:

Margin Kustom (arahkan kursor): 400px ke atas
Transformasi Terjemahkan sumbu Y (arahkan kursor): -100%

Pastikan margin atas kustom saat mengarahkan kursor sama dengan tinggi yang diberikan ke kolom Anda di CSS kustom di atas.

Juga, nilai sumbu Y transformasi terjemahan adalah persentase (-100%), bukan piksel, jadi Anda harus memasukkan ini secara manual dengan mengetikkan nilai di kotak input dari kontrol terjemahan transformasi.

Bagaimana Efek Gulir Ke Bawah Arahkan Arah Bekerja

Mungkin membantu jika saya menjelaskan fungsionalitas pengaturan ini dengan beberapa ilustrasi visual. Katakanlah gambar yang Anda gunakan memiliki tinggi 700px. Tinggi kolom hanya 400px. Ini berarti bahwa Secara default (sebelum mengarahkan kursor), luapan bawah gambar itu akan disembunyikan karena meluas ke luar kolom.

Setelah pengguna mengarahkan kursor ke gambar, dua hal terjadi.

Pertama, properti transform translate menggerakkan gambar ke atas dengan nilai sumbu Y -100%. Dengan kata lain, gambar bergerak naik 100% dari berapa pun tinggi gambar (700 piksel).

Selanjutnya, gambar diberi margin atas 400px untuk mengembalikan gambar ke dalam viewport kolom sehingga posisinya tepat di bawah.

Hal ini terjadi bersamaan dengan efek transform hover sehingga hasilnya adalah scroll halus yang berakhir dengan penempatan yang sempurna.

Berikut adalah hasil yang terlihat seperti pada contoh langsung.

Menyesuaikan Durasi Transisi dan Kurva Kecepatan

Seperti yang Anda tahu, durasi transisi terlalu cepat untuk melihat pratinjau gambar saat mengarahkan kursor. Untuk memperlambatnya, Anda dapat memperbarui durasi transisi. Anda juga dapat menyesuaikan kurva kecepatan untuk mengubah kecepatan selama durasi.

Perbarui berikut ini:

Durasi Transisi: 4000ms
Kurva Kecepatan Transisi: Kemudahan

Secara umum, Anda akan ingin meningkatkan durasi transisi untuk gambar dengan ketinggian yang lebih tinggi untuk memberikan waktu kepada pengguna untuk memproses gambar saat efek gulir melayang terjadi.

Salin dan Tempel Modul Gambar ke kolom yang tersisa

Sekarang yang perlu Anda lakukan hanyalah menyalin modul gambar dan menempelkannya ke kolom 2 dan kolom 3. Kemudian perbarui gambar untuk masing-masing ke gambar baru apa pun yang Anda inginkan. Itu dia!

Menambahkan Judul Di Atas Setiap Gambar Menggunakan Modul Teks

Jika Anda ingin menambahkan judul ke setiap gambar Anda, Anda dapat melakukannya menggunakan modul teks. Namun, kita perlu melakukan beberapa penyesuaian pada modul teks dan modul gambar untuk membuatnya berfungsi.

Lanjutkan dan tambahkan modul teks baru di atas gambar di kolom 1. Anda akan lebih mudah menggunakan mode tampilan bingkai gambar karena kolom Anda disetel ke ketinggian kolom.

Kemudian update konten dengan heading h2 sebagai berikut:

<h2>Homepage</h2>

Kemudian perbarui pengaturan desain sebagai berikut:

Warna Latar Belakang: #ffffff
Orientasi Teks: tengah
Judul 2 Ukuran Teks: 20px
Pos 2 Tinggi Baris: 2em
Margin Kustom: 0px bawah
Padding Kustom: 10px atas
Bayangan Kotak: lihat tangkapan layar

Pengaturan ini mungkin tampak sewenang-wenang, tetapi sebenarnya tidak. Nilai-nilai ini dapat memprediksi berapa tinggi modul teks yang penting untuk diketahui nanti. Sebagai contoh, saya tahu bahwa modul teks akan memiliki tinggi 60px. Mari kita berhitung…

Tinggi garis adalah 2em yaitu 2 kali ukuran teks heading 2 (20px). Ini berarti tinggi garis saya akan menjadi 40px.

Padding atas kustom diatur ke 10px. Dan ada padding bawah tersembunyi 10px yang sudah ada untuk semua judul secara default di Divi. Padding atas dan bawah digabungkan untuk menambah tinggi 20px.

Jadi… 40px (dari tinggi garis) + 20px (dari padding) = 60px

Sekarang kita tahu ketinggian modul teks. Tentu saja, Anda selalu dapat memeriksa elemen menggunakan alat dev hanya untuk memastikan.

Margin bawah kustom 0px diperlukan untuk menghilangkan margin default yang ada di bawah modul (ditambahkan dengan lebar talang).

Karena akan ada beberapa gambar yang tumpang tindih dengan modul teks saat mengarahkan kursor, kita perlu memastikan modul teks tetap berlapis di atas gambar. Kita dapat melakukan ini dengan memberikan modul teks posisi relatif dan mengubah nilai indeks-z sebagai berikut:

Tambahkan CSS khusus berikut ke Elemen Utama:

position:relative;

Kemudian perbarui indeks z:

Indeks Z: 3

Salin dan Tempel Modul Teks

Sekarang setelah judul teks selesai, kita dapat menyalin dan menempelkannya (menggunakan mode tampilan gambar rangka) di atas gambar di kolom 2 dan 3.

Maka yang perlu Anda lakukan hanyalah memperbarui konten untuk masing-masing.

Perbarui Nilai Margin Teratas saat Arahkan Arah untuk Setiap Gambar untuk Mengakomodasi Tinggi Modul Teks

Saat ini, masing-masing gambar di kolom 1, 2 dan 3 memiliki margin atas kustom 400px saat mengarahkan kursor. Ini diatur untuk menyamai tinggi tinggi kustom kolom. Namun, karena modul teks sekarang mengambil beberapa ruang kolom (ketinggian 60px), kita perlu menyesuaikan nilai hover margin atas.

Untuk melakukan ini, gunakan fitur multiselect untuk memilih ketiga gambar. Kemudian perbarui pengaturan elemen sebagai berikut:

Margin Kustom (arahkan kursor): 340px atas

Sekarang gambar Anda akan berhenti sempurna di bagian bawah kolom di akhir status hover.

Hasil Akhir

Berikut adalah hasil akhir dari desain tersebut.

Jangan ragu untuk menduplikasi baris dan memperbarui gambar dan teks judul sesuai kebutuhan untuk tampilan portofolio lainnya.

Inilah tampilannya di tablet dan ponsel.

Pikiran Akhir

Menampilkan desain halaman web Anda dengan efek gulir ke bawah kustom tidak hanya menambahkan interaksi yang sangat keren, tetapi juga menghemat banyak ruang. Ini memungkinkan Anda menampilkan banyak gambar dalam tata letak yang ringkas dan simetris. Fungsionalitas semacam ini biasanya adalah sesuatu yang akan kita dapatkan dengan sebuah plugin. Namun, dengan Divi, Anda memiliki kendali penuh atas desain dan fungsionalitas tanpa harus menambahkan plugin lain. Saya harap ini menginspirasi Anda untuk membuat galeri portofolio yang indah untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!