Animasi Gulir Paralaks Pada Pembangun Oksigen
Diterbitkan: 2022-07-30Dalam tutorial ini, kita akan membuat adegan paralaks multi-layer yang unik di Oxygen Builder. Ini adalah sesuatu yang akan memukau klien dan pengunjung situs web, dan tidak terlalu sulit untuk diterapkan.
Pertama, kita harus benar-benar membuat aset gambar. Ada beberapa cara untuk melakukan ini, dan bagaimanapun Anda memilih untuk menghasilkan adegan ini, pastikan bahwa ada beberapa bagian lebar penuh yang dapat Anda ekspor. Setiap bagian harus mewakili kedalaman tertentu pada gambar. Misalnya, mungkin ada latar depan pepohonan, lalu bukit, lalu bukit lain lagi, dan akhirnya matahari.
Demi tutorial ini, saya memutuskan untuk menggunakan pemandangan matahari terbenam yang sudah ada sebelumnya yang saya ambil dari komunitas Figma. Namun, Anda dapat membuatnya sendiri di Figma, atau menggunakan program lain seperti Photoshop.
Kami menerbitkan artikel tentang membuat animasi gulir paralaks serupa di Elementor beberapa tahun yang lalu, dan menguraikan teknik Photoshop di mana Anda dapat mengambil gambar nyata dan dengan mudah memisahkan dan mengekspornya untuk efek ini. Baca di sini:
Saya menyarankan menggunakan Figma karena gratis, mudah, dan juga memungkinkan ekspor grup dan lapisan dengan cepat.
Berikut demo di mana kita membuat komponen bukit dalam hitungan detik menggunakan pen tool.
Gabungkan beberapa ini bersama-sama, buat grup, dan ekspor dengan mudah, seperti yang akan kita bahas sekarang.
Setelah Anda membuat adegan dengan beberapa grup dan kedalaman gambar yang bervariasi, ekspor setiap grup satu per satu. Di Figma ini sangat mudah. Cukup klik kanan grup, pilih salin/tempel sebagai, lalu salin sebagai PNG.
Saya melakukan ini untuk setiap kelompok elemen.
Saya kemudian menempelkan PNG ini langsung ke editor Gutenberg, yang secara otomatis mengunggahnya ke perpustakaan media.
Selain itu, saya memasang plugin pengoptimalan gambar (ShortPixel), yang secara otomatis mengubah ukuran dan memperkecil gambar sehingga dapat dimuat dengan cepat di bagian depan. Ini penting jika Anda akan menyalin dan menempelkan PNG langsung dari gambar karena tidak ada pengoptimalan sendiri - ukuran file sangat besar.
Untuk latar belakang, saya mengisi pemandangan dengan gradien linier. Figma memiliki fitur hebat di mana kita dapat mengekspor CSS. Cukup klik kanan, salin css, dan hanya tarik keluar latar belakang bingkai utama.
Inilah yang kita akhiri.
Sekarang, kita membuat bagian yang akan berisi semua lapisan adegan paralaks kita. Bagian ini tidak memiliki padding dan disetel ke lebar penuh untuk membuat bagian tersebut imersif.
Saya kemudian dapat mengambil latar belakang gradien linier yang kami ekspor, dan menambahkannya ke CSS khusus bagian kami.
Sekarang, atur bagian agar memiliki position:relative , dan tanpa padding. Jadikan lebar dan height:100vh , dan buat overflow disembunyikan, sehingga adegannya terkandung.
Ada dua cara utama untuk menempatkan setiap lapisan ke dalam adegan: sebagai gambar latar atau elemen <img>.
Saya menggunakan div dan gambar latar karena lebih cepat. Bagian kami berisi 1 div untuk setiap kelompok item. Div benar-benar diposisikan dengan bagian atas, bawah, kiri, dan kanan diatur ke 0. Itu membuatnya mengisi keseluruhan bagian, sementara memungkinkannya untuk dipindahkan melalui terjemahan untuk efek paralaks kita.
Latar depan, latar belakang, dan segala sesuatu di antaranya ditambahkan ke adegan dengan menggunakan gambar latar belakang CSS.
- background-position biasanya diatur ke 100% yang mendorong semuanya ke bawah layar, menyelaraskannya ke bawah. Jika diperlukan, kita dapat dengan mudah mengubah posisi menggunakan properti ini.
- gambar latar belakang diatur untuk memuat, yang berarti akan menjadi lebar penuh dalam div-nya.
- Pengulangan disetel ke tidak ada
- Juga, tambahkan kelas seperti
.plax_hill-1untuk memudahkan identifikasi saat menerapkan efek masing-masing
Ini dilakukan untuk setiap grup yang kami ekspor, dan mereka diposisikan ke lapisan di atas satu sama lain dengan menggunakan indeks-z.
Kita masih bisa cukup responsif dengan mengubah gambar latar belakang pada breakpoint yang berbeda untuk mengakomodasi perubahan layar dari orientasi lanskap ke potret (saya tidak melakukan ini dalam tutorial ini, tetapi jika efek ini akan diproduksi, efeknya pada dasarnya akan berbeda. adegan untuk setiap breakpoint karena kami akan mengganti setiap bagian untuk mengambil lebih banyak real estat karena rasio aspek menjadi lebih panjang).
*Dengan metode gambar, gunakan SRCSET.
Kursus Pembangun Oksigen - Segera Hadir!
Kursus Penguasaan Pembangun Oksigen akan membawa Anda dari pemula hingga profesional - termasuk modul ACF, MetaBox & WooCommerce.
Untuk gambar matahari, saya harus memposisikan bagian atas latar belakang menjadi 50%, yang menempatkannya di tengah div alih-alih mendorongnya sepenuhnya untuk menyelaraskan ke bawah:
Sekarang, seluruh adegan yang kami buat di Figma, diekspor sebagai PNG, diunggah ke WordPress, dan dibangun di atas Oxygen telah selesai. Tampilannya hampir identik dengan desain kami, dan responsif terhadap perubahan ukuran layar. Belum ada paralaks, yang sekarang akan kita lanjutkan dan tambahkan.
Kita dapat menggunakan pustaka paralaks apa pun yang kita inginkan - semuanya melakukan hal yang sama. Untuk tutorial ini saya menggunakan yang lebih baru bernama lax.js.
Namun, lihat Rellax.js dan Paroller.js, keduanya memiliki tutorial yang diterbitkan khusus untuk Oxygen Builder di blog ini.
Untuk Bersantai:
Untuk Parroler:
Lax dapat melakukan paralaks, tetapi juga dapat melakukan banyak hal lain, menjadikannya perpustakaan animasi interaksi yang sangat kuat. Saya ingin menyorotinya di sini dan memberikan contoh dasar untuk menunjukkan kepada Anda apa yang dapat dilakukannya.
Pada dasarnya, Anda memiliki driver, dan kemudian Anda memiliki efeknya. Efeknya diterapkan berdasarkan driver. Dalam contoh ini, driver kami adalah gulir vertikal, dan posisinya. Efeknya bisa apa saja yang ditawarkan CSS. Untuk paralaks, kita akan menggunakan transformY. Namun, kami juga dapat mengubah opacity, scale, color, dan lainnya!
Baca lebih lanjut tentang lax.js di sini: https://github.com/alexfoxy/lax.js
Pertama, kami sertakan dengan menambahkan skrip dari CDN di wp_head. Saya menggunakan WPCodeBox untuk ini:
Kemudian dalam file JS yang ditambahkan ke footer, kami menginisialisasi efek, menambahkan driver yang terlihat pada posisi gulir layar, dan kemudian menambahkan berbagai efek ke setiap elemen. Untuk semua bagian selain matahari, kami biasa menerjemahkan mengapa untuk memanipulasi posisi div berdasarkan posisi gulir vertikal.
Untuk matahari, kita masih menggunakan posisi scroll vertikal sebagai trigger/driver, tetapi alih-alih memanipulasi posisi, kita mengubah skala pada scroll.
Berdasarkan posisi keseluruhan bagian setelah menerapkan efek, saya harus kembali dan mengubah posisi latar belakang elemen untuk memastikan semuanya terlihat benar. Anda juga dapat mencoba dan mengimbangi menggunakan margin atau transformasi. Selama semuanya relatif terhadap skala yang sama, dalam hal ini tinggi layar, itu harus tetap responsif.
Dan akhirnya, kita mendapatkan hasil akhir dari paralaks berlapis yang terlihat berubah saat Anda menggulir. Ini benar-benar unik, dan Anda dapat membuat banyak tampilan berbeda seperti ini yang akan memukau klien dan pengunjung.
Kursus Pembangun Oksigen - Segera Hadir!
Kursus Penguasaan Pembangun Oksigen akan membawa Anda dari pemula hingga profesional - termasuk modul ACF, MetaBox & WooCommerce.