18 Tutorial Pengguliran Paralaks dengan jQuery & HTML5 – 2022
Diterbitkan: 2022-03-17Paralaks telah digunakan sejak akhir 1940-an dan baru-baru ini digunakan di industri seperti game, untuk menciptakan pengalaman bermain game yang unik bagi semua orang. Serius, paralaks mungkin terdengar seperti hal baru bagi para desainer. Namun, konsep ini telah bersama kami begitu lama sehingga desainer hanya sekarang mengejar, dan membangun tren di sekitar efek bergulir ini. Untuk mempersempit deskripsi paralaks, ini adalah teknik unik dalam desain web yang memungkinkan komponen halaman web individual untuk menggulir bersama pengguna pada berbagai interval waktu, yang membantu menciptakan efek latar belakang bergerak di belakang wadah/kisi/konteks apa pun.
Di Colorlib, kami telah mencoba yang terbaik untuk memberikan perhatian terbaik pada paralaks yang kami bisa, sambil mempertahankan konsistensi pendekatan unik di setiap artikel kami:
Kami sekarang ingin memperkenalkan tutorial pengguliran paralaks terbaik yang melibatkan penggunaan teknologi seperti jQuery, JavaScript, HTML5, dan CSS3. Kami fokus pada tutorial yang ramah bagi pendatang baru dalam desain web dan beberapa bagian menengah untuk menjelaskan dasar paralaks dan cara kerjanya.
Sebelum kita masuk ke tutorial kami dan semua itu, ada dua aspek untuk dilihat lebih dekat: dampak pengguliran paralaks pada pengoptimalan mesin telusur. Tentunya menggunakan fitur desain dinamis akan berdampak pada cara mesin pencari memproses situs web Anda, dan Anda tidak ingin puas dengan fitur yang dapat berdampak buruk pada lalu lintas organik Anda. Carla Dawson dari Moz membahas topik ini dengan sangat rinci. Takeaway utama dari postingnya adalah daftar 3 teknik unik yang dapat Anda terapkan untuk membuat desain paralaks Anda lebih SEO friendly. Semuanya dimulai bahkan sebelum Anda mencoba membuat efek paralaks fungsional pada desain Anda, pertama-tama terapkan metodologi SEO, dan kemudian fokus pada pembuatan konten, dengan cara ini Anda memberi ruang bagi mesin pencari untuk memahami cara kerja situs web Anda, tetapi juga mengizinkan robot untuk memproses konten.
Aspek kedua adalah pengalaman pengguna dari desain paralaks, apakah cocok untuk semua desain, dan masalah apa yang mungkin ditimbulkannya. Ini adalah studi penelitian mendalam tentang efek desain paralaks pada pengalaman pengguna, sehingga akan membutuhkan waktu untuk sepenuhnya memproses dan memahami makalah ini. Studi ini mengambil dua kelompok orang, keduanya diberikan situs web sampel untuk dijelajahi: paralaks, dan pengguliran standar. Hasil akhirnya tidak mengejutkan, pengguna lebih menikmati pengguliran paralaks, tetapi ini menimbulkan kebingungan, dan masalah kegunaan umum sejauh perhatian. Anda harus selalu memprioritaskan pengguna daripada penambahan mewah pada desain situs web Anda, jika ini berarti mempekerjakan perancang ahli profesional untuk menganalisis Anda, maka Anda harus terus maju dengan gagasan itu, terutama jika Anda menjalankan operasi bisnis skala besar. Dalam pengalaman kami sendiri, situs web skala kecil biasanya dapat menggunakan pengguliran paralaks, dan itu tidak berdampak besar pada pengalaman pengguna, atau kegunaan umum.
Sekarang setelah kita membahas kedua topik tersebut, kita dapat mulai mempelajari beberapa teknik dan metode tentang cara menerapkan pengguliran paralaks dan membuat efek pengguliran paralaks Anda. Tutorial pertama datang dari Petr Tichy, yang telah melakukan pekerjaan front-end selama bertahun-tahun dan merupakan profesional mapan di bidang ini. Anda akan mempelajari fase pengaturan awal paralaks, cara menambahkan efek animasi yang juga terintegrasi paralaks, dan cara mengalokasikan waktu yang tepat untuk setiap animasi. Tutorialnya sedikit rumit dalam beberapa hal, jadi ditujukan untuk pengembang menengah yang memiliki pengetahuan JavaScript sebelumnya. Dalam tutorial yang sama, Anda akan menemukan tautan ke salah satu tutorial Petr sebelumnya tentang paralaks, yang jauh lebih ramah bagi pemula.
Ian Yates menulis tutorial ini di awal tahun, dan ini mungkin salah satu tutorial terbaru tentang topik ini yang akan kami tampilkan dalam kumpulan tutorial paralaks ini. Ian mengambil pendekatan untuk menghasilkan inspirasi dari situs web lain yang menggunakan kombinasi efek paralaks yang hebat, dan mencoba membuatnya sendiri. Satu-satunya, dia kebanyakan berbicara tentang desain unggulan yang memiliki fitur paralaks, dan menyebutkan satu cuplikan kecil tentang cara membuat efek latar belakang yang unik menggunakan JS dan CSS.
Klien tidak memiliki banyak pengetahuan tentang standar desain, klien hanya cenderung peduli dengan tren dan hal-hal seperti membuat situs web terlihat sangat keren, dan benar-benar unik untuk apa pun yang dapat disebut sebagai persaingan. Jika Anda bekerja dengan klien seperti itu, tutorial singkat tentang cara membuat efek gulir unik pada desain akan menjadi penting, dan kami pikir kami memiliki satu di sini yang akan menyelesaikan pekerjaan, begitu saja. Anda akan belajar tentang penataan kode HTML5 yang ditata dengan CSS3, dan kemudian dibangun menjadi efek paralaks menggunakan jQuery.
Tutorial dari Script Tutorials telah mencapai lebih dari 17.000 desainer dan pengembang, jumlah ini membuat kami penasaran, karena itu berarti tutorial harus benar-benar berfungsi, dan harus memberikan pengalaman gerak paralaks yang halus. Setelah beberapa pengujian lokal, sepertinya memang demikian. Pendekatan paralaks HTML dan CSS yang biasa, dan semua yang benar-benar perlu Anda lakukan adalah menyalin dan menempelkan kedua kode ke dalam desain Anda dan Anda harus melakukannya dengan baik. Padahal, kita bisa membayangkan ini menjadi sedikit lebih sulit dalam situasi di mana Anda perlu menerapkannya untuk desain kustom, jadi mungkin kita perlu terus mencari tutorial keseluruhan yang dapat membantu dengan ini.
Andy Shora mungkin bisa membantu kami dalam hal itu. Tujuan utamanya adalah menciptakan efek paralaks yang tidak mengganggu kinerja situs web, yang dicapai melalui: meminimalkan jumlah interaksi DOM untuk peristiwa gulir, dan menggunakan akselerasi perangkat keras untuk meningkatkan kinerja perangkat seluler. Sebenarnya, ini adalah panduan lain untuk benar-benar belajar tentang cara perangkat seluler berinteraksi dengan paralaks, dan apa yang dapat dilakukan untuk mendorong kinerja maksimal tanpa kehilangan kualitas atau daya tarik desain. Anda akan menjelajahi dua potongan jQuery yang berbeda yang digunakan untuk membuat efek paralaks kinerja yang optimal pada desain situs web apa pun.
Karena paralaks adalah teknik baru (yah, beberapa tahun sekarang, tapi tetap saja) ini memiliki banyak tantangan bagi pengembang yang ingin menerapkan paralaks untuk peramban web lama, prosesnya tidak semudah itu, dan memerlukan sedikit pemahaman tentang cara kerja browser lama dengan fitur web baru. Tutorial selanjutnya menunjukkan contoh baik dan buruk antara situs paralaks, dan apa yang dapat dipelajari dalam proses analisis. Selanjutnya berbicara tentang sudut paralaks yang berbeda juga, seperti vertikal dan horizontal - kemungkinan desain web modern benar-benar telah berkembang ke tingkat yang baru. Anda akan belajar tentang perpustakaan JavaScript paling berguna yang terkait dengan paralaks, dan masing-masing memiliki dokumentasi dan tutorial individual yang tersedia untuk mereka secara online, kami ingin membagikan perpustakaan itu sendiri, tetapi jumlahnya tidak terlalu besar, jadi Anda akan belajar tentang semuanya dalam tutorial ini. Ini adalah sumber yang benar-benar luar biasa untuk semua hal paralaks, terutama interaksi dan berbagai cara untuk mencapai efek pengguliran dinamis.
Cara membuat efek paralaks sederhana
Sara Vieira meskipun merupakan pengembang yang hebat, tidak main-main dengan kode atau terminologi yang rumit dalam hal topik seperti paralaks. Dia lebih suka membuat teknik sederhana untuk mencapai hasil yang diinginkan, dan memungkinkan Anda bereksperimen dengan kode yang dia bagikan sesuai keinginan Anda. Anda akan bereksperimen dengan tiga besar: JS, HTML, dan CSS. Cara terbaik untuk bereksperimen adalah di server web lokal, atau di folder terpisah di server langsung Anda, dan lihat hasil seperti apa yang dapat Anda capai dengan cara ini.
Efek paralaks dengan jQuery
Apa yang menarik dari tutorial ini, adalah bahwa itu sudah diterapkan di halaman yang Anda lihat, jadi sebenarnya tidak perlu banyak menjelaskan dalam teks tertulis, melainkan memberikan contoh dalam bentuk kode langsung. Anda dapat mengambil cuplikan HTML/CSS dan menggabungkannya dengan cuplikan jQuery untuk mencapai efek paralaks yang sama dengan halaman yang Anda lihat. Dengan sedikit deskripsi (komentar) cuplikan tersedia di sisi kanan setiap cuplikan kode.
Pada akhirnya, Anda ingin mengandalkan CSS sebanyak mungkin. CSS berarti kinerja yang jauh lebih baik, dan lebih sedikit kerumitan berurusan dengan bahasa dinamis seperti jQuery. Apa yang Anda miliki di sini adalah cuplikan CSS sederhana yang akan membuat paralaks wadah konten Anda dan membuat pengalaman konten jauh lebih kaya, dengan tolok ukur kinerja yang hebat.
Stellar.js adalah pustaka JavaScript yang cukup populer yang dibuat untuk membantu menambahkan efek paralaks dengan cepat ke situs web Anda. Meskipun perpustakaan belum mengalami banyak perkembangan dalam setahun terakhir, perpustakaan ini masih digunakan secara aktif oleh pengembang dan desainer di seluruh komunitas. Anda akan menjelajahi proses bagaimana memasukkan Stellar ke dalam desain Anda sehingga elemen tertentu diberikan efek paralaks. Pustaka jelas merupakan pilihan yang aman dalam memasukkan fitur dinamis seperti itu, karena dapat dengan mudah dilepaskan dari alur kerja pengembangan utama jika perlu.
Menggunakan Parallax untuk Membuat Situs WordPress Anda Pop
Parallax digunakan dalam banyak konteks yang berbeda, kita harus bertanya-tanya apa yang membuat pengguna kembali ke fitur menarik ini, dan bagi banyak orang — alasan itu adalah kemampuan untuk menceritakan kisah yang lebih baik, melalui penggunaan animasi gulir halus yang dapat mengambil alih pembaca dari satu bagian cerita, ke bagian lain, dengan gerakan mengalir yang indah. Dan bagaimana dengan blog WordPress, bagaimana cara menambahkan paralaks ke WordPress tanpa menggunakan tema unik yang mendukung fungsi tersebut? Jika itu adalah satu-satunya pertanyaan Anda yang benar-benar membara, Anda akan menemukan semua jawabannya dalam tutorial berikut. Kami merasa bahwa ini adalah tutorial paralaks terlengkap untuk blog WordPress, dan kami berharap Anda akan segera menambahkan efek hebat ini ke blog Anda sendiri. Lewati pendahuluan jika Anda sudah tahu apa yang paralaks lakukan, cukup banyak panduan yang didedikasikan untuk menjelaskan paralaks secara detail, jadi hindari apa pun yang terasa seperti Anda sudah mengetahuinya.
Apa itu Wix? Ini adalah platform pembuatan situs web gratis terkemuka di web, dan orang-orang ini telah berkecimpung dalam bisnis ini selamanya! Ini bukan tutorial, melainkan petunjuk bagi pengembang yang bekerja dengan klien, dan jenis klien yang lebih suka menggunakan platform seperti Wix untuk menghosting dan membangun situs web mereka. Sekarang pengguna Wix juga dapat menikmati efek paralaks, dan mereka memiliki banyak demo bagus untuk ditunjukkan kepada Anda, untuk memikat Anda. Kami bercanda tentu saja, menggunakan Wix dapat menghemat banyak waktu karena harus membangun desain yang unik, dan secara mengejutkan permintaan untuk situs web tidak berkurang, meskipun klien sendiri dapat mencapai desain hebat ini jika saja mereka meluangkan sedikit waktu ekstra untuk mempelajari tentang platform yang mereka gunakan untuk meng-host situs web mereka. Jangan takut untuk menawarkan klien baru kesempatan untuk meng-host situs web mereka dengan Wix, atau platform pembuatan situs web lainnya. Ini adalah langkah ke arah yang benar sejauh pemeliharaan situs web berjalan, dan dalam beberapa kasus; kinerja juga.
Paralaks lanskap menggunakan CSS
Anda memiliki banyak pilihan untuk desain paralaks, jadi selama Anda tahu apa yang Anda lakukan sebagai desainer dan pengembang front-end, Anda dapat membuat apa saja menjadi efek paralaks, bahkan mereplikasi lanskap hanya menggunakan sedikit CSS dan jQuery sihir! Dave Chenell membawa Anda melalui langkah-langkah yang diperlukan untuk membuat efek desain lansekap dalam paralaks.
Cara Membuat Ilustrasi Paralaks Berlapis dengan CSS & Javascript
Efek paralaks berlapis terdiri dari penggunaan dua gambar di atas satu sama lain untuk membuka skenario visual tertentu. Ini akan semakin meningkatkan pengalaman visual yang akan dimiliki pengguna Anda dengan desain/situs web Anda, dan ini juga merupakan peluang bagus untuk mengeksplorasi kemungkinan seni gambar tangan dan penggabungannya dalam desain situs web, karena sebagian besar Anda akan ingin menggunakan sesuatu yang dapat saling tumpang tindih dan masuk akal, seperti yang akan Anda lihat di pratinjau demo.
Situs Web Parallax CSS Murni
Tutorial intro yang bagus tentang membuat efek gulir yang solid menggunakan paralaks, tidak menggunakan apa pun selain CSS asli.
Menciptakan Efek Paralaks Firewatch
Parallax telah disebut banyak nama, dan pasti ada sekelompok desainer / pengembang setia yang benar-benar membenci tren paralaks, tetapi apa yang dapat Anda lakukan, tampaknya berhasil untuk banyak orang, jadi mengapa berhenti memproduksi tutorial dan konten di bagaimana membuat efek ini mungkin secara real-time. Tutorial yang kami miliki di sini akan membuat ulang efek tertentu dari situs web Firewatch, untuk membuat semacam efek lanskap yang dikombinasikan dengan elemen jatuh untuk memungkinkan pengungkapan konten ekstra. Kedengarannya rumit pada awalnya, tetapi Hamish (penulis tutorial) dengan baik menjelaskan semuanya langkah demi langkah.
Apa pun kebutuhan Anda, kami merasa bahwa tutorial yang kami cantumkan akan benar-benar mencakup semua aspek yang muncul dalam tren desain web yang sedang berkembang ini. Dari efek sederhana, hingga efek yang dioptimalkan kinerja, hingga pendekatan unik untuk menghadirkan pengalaman konten yang akan diingat lebih dari beberapa menit. Banyak dari apa yang terjadi dalam desain web bermuara pada inspirasi, dan bagaimana menginspirasi pengguna dan pembaca dengan sentuhan unik yang dicapai melalui kemahiran desain.