Panduan Utama Menggunakan Parallax Dengan Divi

Mencoba menemukan ukuran gambar yang tepat untuk paralaks bisa sedikit membuat frustrasi. Gambar mungkin terlihat bagus sebagai gambar latar standar, tetapi segera setelah Anda memilih "Gunakan Efek Paralaks", gambar akan meledak dan tidak ada yang terlihat benar. Untuk menghindari kejengkelan ini di masa depan, Anda perlu memahami apa itu paralaks dan apa yang terjadi pada gambar ketika dimasukkan ke dalam mode paralaks.

Hari ini, saya akan menyelam jauh ke dalam cara paralaks bekerja dengan Divi. Saya akan menjelaskan dengan tepat apa yang terjadi ketika Anda menggunakan dua metode paralaks yang berbeda, ukuran gambar apa yang terbaik, dan saya bahkan akan memberikan beberapa peretasan css khusus untuk memposisikan gambar Anda seperti yang Anda inginkan.

Mari kita pergi.

Apa itu Paralaks?

Sehubungan dengan desain web, paralaks adalah istilah yang digunakan untuk menggambarkan efek yang memberikan persepsi jarak dan gerakan seperti kehidupan menggunakan semacam animasi dua dimensi. Ini dilakukan dengan mengubah kecepatan pengguliran elemen yang berbeda pada halaman web untuk menciptakan ilusi jarak saat melihat titik tetap. Teknik ini telah ada untuk sementara waktu di tempat-tempat selain web. Ingat Super Mario Brothers? Jika Anda pernah memainkan video game di tahun 80-an (Nintendo NES), sebagian besar game menggunakan teknik ini untuk memberikan kesan gerakan hanya dengan menggunakan citra 2d. Item di garis depan bergerak lebih cepat daripada pohon/gunung/awan di latar belakang. Sehingga menciptakan gerakan yang lebih hidup.

Efek ini sangat mirip dengan metode True Parallax di Divi. Kecuali gerakannya vertikal, bukan horizontal.

Memahami Bagaimana Parallax Bekerja dengan Divi

Dengan Divi, Parallax sangat mudah digunakan pada gambar latar belakang apa pun di bagian, baris, kolom, atau modul mana pun. Yang harus Anda lakukan adalah mengatur opsi Parallax Effect ke "YA" dan kemudian pilih Metode Parallax Anda (CSS atau True Parallax).

Metode CSS

Metode CSS adalah salah satu dari dua metode yang dapat Anda pilih untuk efek paralaks Anda. Anda mungkin dapat menebak apa yang terjadi hanya dengan menguji metode ini di situs Anda. Ini disebut sebagai Metode CSS karena hanya menggunakan CSS untuk membuat efeknya. Metode ini menggunakan CSS untuk memperbaiki gambar latar di tempatnya sementara elemen lain pada halaman menggulir secara normal. Ini memberi kesan bahwa konten bergerak di depan gambar latar belakang.

Metode Paralaks Sejati

Metode kedua disebut True Parallax. Ini disebut "Benar" mungkin karena itu mencontohkan gagasan konvensional tentang efek paralaks. Metode ini menggunakan CSS dan JavaScript untuk membuat gerakan gulir yang sedikit lebih lambat daripada elemen lain di halaman. Ini adalah representasi gerakan yang lebih hidup karena persepsi jarak yang tercipta antara gambar yang bergerak lambat di latar belakang dan elemen yang bergerak lebih cepat di bagian depan.

Apa Yang Terjadi Ketika Parallax Diaktifkan di Divi?

Ini bisa membuat frustrasi jika Anda tidak mengerti apa yang terjadi di balik layar. Oleh karena itu, sangat membantu untuk mengetahui dengan tepat apa yang terjadi pada gambar ketika paralaks diaktifkan.

Apa Yang Terjadi Ketika Metode CSS Dipilih?

Ketika CSS Parallax dipilih, gambar dibungkus dalam div baru dengan posisi absolut yang mencakup ukuran penuh jendela browser. Berikut adalah Kelas CSS dan cuplikan kode yang melakukan ini di Divi:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

Karena ukuran latar belakang diatur ke "penutup" dengan tinggi dan lebar 100%, gambar akan selalu "menutupi" setiap bagian dari wadahnya. Dalam hal ini, wadahnya adalah jendela browser. Ini berarti bahwa bagian dari gambar akan disembunyikan di balik bagian konten lainnya karena gambar latar akan selalu mengembang dan mengecil seiring dengan ukuran jendela browser.

Bayangkan ini adalah gambar latar biasa yang ditambahkan ke modul header di bagian atas halaman.

Rasio aspek gambar benar (1920×1080) dan ukuran gambar menutupi dan pas di bagian dengan baik tanpa tumpang tindih jika dilihat pada ukuran layar 1366×766. Area putih di bawah gambar adalah sisa konten pada halaman.

Sekarang inilah yang terjadi ketika Anda memilih paralaks untuk gambar Anda.

Seperti yang Anda lihat, gambar mengembang baik secara vertikal (untuk mencapai bagian bawah jendela browser) dan horizontal (untuk menjaga rasio aspek gambar). Kotak hitam mewakili monitor Anda sehingga semua yang ada di dalam kotak hitam adalah apa yang dilihat pemirsa. Saya membuat bagian konten putih di bagian bawah semi-transparan sehingga Anda dapat melihat di mana gambar latar belakang tersembunyi di baliknya. Di sana gambar tetap tetap saat Anda menggulir dan elemen lain bergerak ke atas dan ke bawah di depan gambar.

Apa Yang Terjadi Ketika Metode Paralaks Benar Dipilih?

Jika Anda memiliki True Parallax set, gambar dibungkus dalam div baru dengan kelas CSS yang sama:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Namun, melalui penggunaan sedikit JavaScript, tinggi dan posisi gambar diatur secara dinamis berdasarkan ukuran jendela browser dan saat menggulir halaman ke bawah. Dua nilai yang ditambahkan secara dinamis ke gambar latar belakang adalah nilai px untuk properti height dan nilai translate untuk properti transform. Nilai properti height menentukan tinggi gambar sedangkan nilai translate properti transform menentukan posisi yang tepat dari gambar pada halaman menurut sumbu x dan y.

Berikut adalah kode yang dimasukkan ke tag gambar dari gambar latar belakang paralaks saya dengan jendela browser saya menjadi 1366×766:

    height: 960.8px;
    transform: translate(0px, 220.5px);

Perhatikan dua angka di properti transform. Kedua angka ini mengontrol posisi gambar latar belakang. Angka pertama (0px) memposisikan gambar di sepanjang sumbu x (horizontal). Karena disetel ke 0px, gambar tidak akan dipindahkan. Angka kedua memposisikan gambar di sepanjang sumbu y (vertikal). Karena saat ini 220.5px, itu berarti gambar sedang didorong ke bawah halaman 220.5px.

Perhatikan juga nilai tinggi (960,8px) lebih besar dari tinggi jendela browser saya (766px) sekitar 200px. Ini untuk mengakomodasi gambar yang didorong 220.5px melewati bagian bawah jendela browser.

Ketika Metode Paralaks Sejati dipilih, Anda mungkin telah memperhatikan bahwa gambar Anda menjadi lebih besar daripada Metode CSS. Ini karena posisi gambar direntangkan tambahan 30% dari tinggi browser.

Ingat ilustrasi latar belakang biasa kami?

Inilah yang terjadi pada gambar setelah True Parallax dipilih (tentu saja sebelum Anda mulai menggulir):

Seperti yang Anda lihat, gambar ditarik sedikit lebih melewati bagian bawah jendela browser. Jendela browser ini berukuran sekitar 1080x700 sehingga cukup kecil, tetapi saya ingin menunjukkan kepada Anda apa yang terjadi pada jendela desktop yang lebih kecil.

Mengapa True Parallax Meregangkan Gambar Sejauh Ini?

Nah, tebakan terbaik saya adalah mengakomodasi ukuran layar yang lebih besar. Setelah jendela browser mencapai ukuran layar 1920x1080, gambar latar belakang tidak lagi melewati bagian bawah jendela dan cocok dengan baik.

Mengapa True Parallax Menggunakan JavaScript?

Alasan utama True Parallax membutuhkan JavaScript adalah karena gambar latar harus bergerak dengan kecepatan yang berbeda dari elemen lain saat menggulir. Ingat Mario Brothers?

Dengan True Parallax, jika saya memperbesar ukuran browser saya, nilai tinggi juga meningkat secara dinamis melalui JavaScript memastikan gambar saya selalu cukup besar untuk browser.

Jika saya menggulir halaman ke bawah, nilai posisi terjemahan (220.5px pada contoh di atas) meningkat, memindahkan posisi vertikal (sumbu y) gambar ke bawah halaman.

Jika saya menggulir ke atas, nilai posisi terjemahan berkurang, menarik gambar kembali ke atas halaman. Tetapi karena gambar didorong ke bawah dan ditarik ke atas dengan kecepatan yang berbeda dari elemen lain saat menggulir, Anda mendapatkan efek paralaks True.

Jenis Gambar Apa yang Harus Saya Gunakan?

Jika Anda ingin menggunakan efek paralaks di situs Anda, memilih gambar latar belakang yang tepat sangat penting. Anda tidak ingin latar belakang terlalu berantakan atau mengganggu. Tetapi di sisi lain Anda juga tidak ingin itu menjadi catatan sampingan yang membosankan.

Inilah 5 Tips Umum untuk Memilih Jenis Gambar yang Tepat untuk Paralaks

1. Hindari Foto yang Mengganggu. Gambar yang terlalu banyak terjadi dengan membuat kebingungan dan mengalihkan perhatian dari konten.
2. Pastikan foto Anda sesuai dengan tema situs Anda. Situs Anda harus menceritakan sebuah kisah. Gambar paralaks ini (seperti gambar Anda lainnya) harus sesuai dengan tema.
3. Tetap besar dan sederhana. Ingat, gambar paralaks Anda juga akan dilihat pada ukuran layar yang lebih kecil. Pastikan detail foto tidak terlalu kecil sehingga tidak dapat dikenali di perangkat yang lebih kecil.
4. Tambahkan warna overlay bila perlu. Terkadang gambar paralaks yang baik memiliki aspek gelap dan terang yang mungkin akan menyembunyikan teks Anda saat menggulir. Menambahkan overlay gelap atau terang akan menjamin teks Anda dapat dibaca di mana saja pada gambar
   
5. Jadikan Itu Menarik. Ada cara untuk membuat foto di luar sana untuk menyelesaikan sesuatu yang membosankan. Luangkan waktu untuk menemukan satu yang melibatkan audiens Anda dan menarik perhatian mereka.

Berapa Ukuran Gambar Latar Belakang Paralaks yang Harus Anda Gunakan?

Yang ini agak sulit untuk dijawab. Tidak ada satu ukuran yang cocok untuk semua gambar paralaks. Sebenarnya tidak ada satu ukuran yang cocok untuk semua hal dalam desain web, setidaknya tidak sejak desain responsif muncul. Namun, meskipun saya mungkin tidak dapat memberi Anda aturan yang tegas, saya dapat menawarkan beberapa panduan umum untuk memilih gambar latar paralaks ukuran yang tepat dengan Divi.

Karena ukuran layar yang paling populer adalah sekitar 1366x766, saya pasti akan memastikan semua gambar paralaks latar belakang setidaknya berukuran ini. Tetapi karena popularitas monitor yang lebih besar, saya akan memilih ukuran yang lebih besar seperti 1920×1080. Ini akan memastikan pengguna melihat gambar berkualitas tinggi di desktop yang lebih besar.

Masalah dengan memiliki gambar dengan dimensi 1920x1080 adalah Anda jarang memiliki bagian yang terlihat dengan tinggi 1080px. Jadi Anda dapat menyimpan di bagian bawah gambar-gambar itu dengan tetap tersembunyi.

Kiat Bermanfaat untuk Membuat Gambar Latar Belakang Paralaks Anda Terlihat Benar

Untuk Header dan Bagian Atas

Cara termudah untuk memastikan gambar Anda sepenuhnya terlihat dan terlihat bagus adalah dengan menggunakan Modul Header Lebar Penuh. Dengan begitu, gambar latar belakang Anda akan selalu terlihat bagus, berapa pun ukuran layarnya. Namun, Jika Anda menggunakan gambar latar paralaks menggunakan Modul Header Lebar Penuh, Anda mungkin perlu menambahkan beberapa bantalan ke bagian atas dan bawah modul untuk menampilkan lebih banyak gambar. Anda dapat melakukan ini dengan menggunakan Visual Builder. Buka Pengaturan Modul Header. Di bawah Tab Tingkat Lanjut, masukkan yang berikut ini di kotak teks Elemen Utama:

Padding: 250px 0 250px;

Itu seharusnya membawa Anda ke arah yang benar.

Jika Anda masih belum cukup menampilkan gambar, saya sarankan untuk memotong bagian atas gambar Anda dan kemudian mengunggahnya lagi. Ini dapat membantu.

Juga, cobalah untuk memilih foto yang memiliki konten tidak penting di bagian bawah gambar dan konten yang lebih penting di bagian atas. Untuk header, Anda seharusnya hanya melihat 700px teratas dari gambar paralaks.

Untuk Bagian Reguler/Tengah

Pastikan Anda meninggalkan cukup ruang di sekitar konten Anda untuk mengekspos latar belakang sehingga Anda bisa mendapatkan gambar penuh saat bagian mencapai sudut pandang tengah pengguna. Gunakan bantalan untuk keuntungan Anda. Jika Anda akan menggunakan paralaks, jangan biarkan pengguna Anda bingung dan harus menggulir ke atas dan ke bawah hanya untuk melihat apa gambarnya. Lebih baik menunjukkannya pertama kali.

Untuk Bagian Bawah / Footer

Jika Anda menggunakan Metode CSS, Anda dapat melihat lebih banyak bagian bawah gambar latar belakang Anda (tergantung pada seberapa banyak ruang yang Anda miliki). Saya akan mencoba memotong bagian bawah foto untuk menampilkan lebih banyak bagian atas di bagian ini.

Jika Anda menggunakan metode True Parallax, Anda akan melihat sebagian besar bagian atas gambar Anda, jadi saya akan memperlakukannya seperti header Anda.

Berikut adalah contoh gambar background True Parallax di bagian atas, tengah, dan bawah halaman.

Jenis gambar jembatan ini bekerja dengan baik karena memiliki titik fokus yang bagus ke samping dan bagian bawah gambar tidak sepenting bagian atas, sehingga pesan tidak pernah hilang dari pengguna.

Berikut adalah halaman yang sama menggunakan metode CSS. Anda benar-benar dapat melihat fakta bahwa gambar latar belakang diperbaiki dan diperluas ke jendela browser. Bahkan sepertinya itu adalah gambar yang sama yang tetap di latar belakang sepanjang waktu.

Jika Anda masih tidak puas setelah Anda mencari gambar yang sempurna, menambahkan padding yang diperlukan, dan memotongnya, Anda selalu dapat menggunakan beberapa peretasan.

Hacks Gambar Parallax: Mengubah Posisi Gambar dengan CSS Kustom

Jika Anda ingin mengubah posisi latar belakang paralaks, Anda dapat menggunakan pemilih css “.et_parallax_bg”. Berikut adalah css default yang memposisikan gambar untuk efek paralaks.

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Jika Anda perhatikan, secara default, properti posisi latar belakang untuk metode paralaks css adalah sebagai berikut diatur ke "tengah atas". Tetapi jika saya ingin mengubah posisi asli gambar latar belakang, Anda dapat menyesuaikan nilai properti posisi latar belakang.

Jika Anda ingin membuat CSS Kustom Anda terkondensasi ke gambar tertentu dan tidak memengaruhi semua latar belakang paralaks Anda, Anda perlu menambahkan kelas ke bagian Anda sehingga kami dapat mengidentifikasi di css latar belakang mana yang perlu kami sesuaikan.

Buka pengaturan bagian, di bawah tab Advance, dan masukkan Kelas CSS yang disebut "parahacks".
Sekarang buka Pengaturan Halaman dan pilih tab Lanjutan.

Kemudian gunakan kotak Custom CSS untuk memasukkan salah satu contoh Custom CSS berikut:

Jika menggunakan Metode CSS, Anda dapat membuat gambar latar di tengah secara vertikal dengan menambahkan custom css berikut:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

Untuk membuat gambar latar belakang rata bawah, tambahkan custom css berikut:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

Untuk membuat gambar latar belakang bergerak ke atas sejumlah piksel, tambahkan css khusus berikut:

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

Jika menggunakan metode True Parallax, Anda harus memperhitungkan ekstra 220px (kurang lebih tergantung pada tinggi browser Anda) gambar yang disembunyikan di bagian bawah. Untuk membuat gambar latar belakang lebih terpusat secara vertikal, Anda perlu menyesuaikan properti background-position menggunakan nilai piksel negatif seperti:

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

Untuk membuat gambar latar belakang lebih rata bawah, tambahkan css khusus berikut:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL; DR? Berikut adalah Ringkasan Video dari Poin Utama

Berlangganan Saluran Youtube Kami

Dalam Penutupan

Saya sangat berharap panduan ini membantu dalam mendapatkan pemahaman yang mendalam tentang bagaimana paralaks bekerja dengan Divi. Untungnya Divi melakukan hampir semua pekerjaan berat dalam memberi kami fungsionalitas paralaks. Metode CSS dan metode True Parallax keduanya menciptakan efek luar biasa seperti kehidupan. Namun, terserah pada kami untuk menemukan gambar yang tepat dan mengubahnya dengan tepat untuk membuatnya berfungsi untuk situs kami. Pergi untuk itu! Saya yakin Anda akan menciptakan sesuatu yang luar biasa.

Berharap untuk mendengar dari Anda di komentar.

Bersulang!