10 CSS & JavaScript Cuplikan untuk Membuat Efek Parallax Scrolling

Ada banyak kebingungan tentang desain paralaks dan cara kerjanya di web. Secara umum, desain paralaks menggunakan gerakan untuk menciptakan ilusi kedalaman pada halaman.

Ini dapat berhubungan dengan perubahan latar belakang atau item posisi semi-tetap yang bergerak di samping pengguliran pengguna. Kami telah membahas banyak contoh dari situs web tetapi belum merinci tentang teknik yang terlibat.

Untuk koleksi ini, saya telah memilih potongan CSS dan JavaScript favorit saya untuk membuat tata letak paralaks. Semua contoh menawarkan kode sumber gratis, sehingga Anda dapat bermain-main dengan cuplikan dan bahkan menggunakannya dalam proyek Anda sendiri.

1. The Great Fall oleh CJ Gammon

Contoh paralaks ini adalah salah satu antarmuka paling unik yang pernah saya temukan. Ini menggunakan skrip khusus untuk membuat sprite air terjun yang tampaknya mengalir tanpa henti ke bawah halaman. Itu telah dibangun di atas elemen kanvas yang dikontrol melalui JavaScript, jadi ini adalah pengaturan yang cukup teknis.

Untuk sebagian besar, ini adalah bukti dari apa yang mungkin dalam pengembangan web modern. Mempelajari elemen kanvas memberi Anda banyak kendali atas desain Anda.

Lihat Pena The Great Fall oleh CJ Gammon

2. CSS Scrolling Parallax oleh Sebastian Schepis

Inilah efek paralaks yang lebih praktis dengan latar belakang tetap dan halaman yang lebih besar di atasnya. Saat Anda menggulir, setiap bagian halaman muncul di atas latar belakang. Ini menciptakan ilusi kedalaman, dan ini adalah salah satu elemen kunci untuk desain paralaks yang sangat baik.

Pengembang Sebastian Schepis hanya menggunakan CSS untuk halaman ini, dan ini adalah konsep yang cukup sederhana. Saya pikir siapa pun bisa mengkloning ini dengan mudah, belum lagi desain latar belakang bisa sangat ditingkatkan.

Lihat Pen CSS Scrolling Parallax Effect oleh Sebastian Schepis

3. Paralaks Tag Gambar Sederhana oleh Renan Breno

Anda akan sering menemukan desain paralaks yang digabungkan dengan gambar latar layar penuh yang besar. Ini semua terlalu umum di situs perusahaan & startup di mana mereka biasanya menampilkan "kecepatan gulir" paralaks tertentu untuk latar belakang.

Perbedaannya di sini bukan pada seberapa cepat Anda menggulir halaman ke bawah atau seberapa besar penempatan gambarnya. Sebagai gantinya, Anda melihat seberapa cepat gambar bergerak melalui latar belakang halaman saat Anda menggulir. Ini adalah efek paralaks yang halus, tetapi tata letak ini adalah template yang sangat baik untuk melihat kecepatan animasi yang berbeda dalam tindakan.

Lihat Pena Simple Image Tag Parallax oleh Renan Breno

4. Latar Belakang Gambar Paralaks & Tetap

Latar belakang gambar yang diperbaiki berfungsi dengan baik untuk memisahkan halaman dan membagi bagian konten secara merata. Saat Anda menggulir, rasanya seperti bagian halaman individual lebih tinggi daripada gambar latar belakang. Ini semua dirancang untuk menghidupkan efek paralaks saat menggulir.

Saya tidak akan menggunakan tata letak yang tepat ini karena area konten tampak agak tipis. Tetapi jika Anda menyukai gaya ini, saya sarankan untuk menandai setiap bagian halaman dengan gambar berbeda yang relevan dengan situs web Anda.

Lihat Pen #Maincode Hackdays oleh chaobu

5. Paralaks CSS oleh Paulo Cunha

Contoh paralaks ini adalah contoh unik bagaimana efek paralaks bekerja. Semua konten halaman berada di bawah gambar pahlawan besar yang menghilang di bawah konten saat digulir. Ini juga menggunakan posisi gambar tetap untuk membuatnya tampak seolah-olah halaman bergerak di atas gambar, daripada gambar tetap di tempatnya.

Anda dapat menggunakan efek yang sama ini dengan tata letak pengguliran yang panjang dan itu akan memiliki gaya desain yang serupa. Ini akan bekerja paling baik untuk posting blog tunggal dengan gambar berfitur besar atau halaman arahan yang menggunakan pahlawan besar untuk menarik perhatian.

Lihat Pena CSS Parallax oleh Paulo Cunha

6. Desain Paralaks oleh Katie Rogers

Berikut desain paralaks yang menarik untuk contoh halaman pernikahan. Ini memiliki desain halaman terpisah di mana gambar memisahkan banyak area konten yang berbeda dengan pengguliran tetap paralaks. Semuanya berjalan di CSS, yang merupakan sentuhan yang bagus, dan semua gambar latar tetap tetap saat bergerak ke bawah halaman.

Efek ini berfungsi karena area konten memiliki bayangan kotak besar yang jatuh di atas latar belakang. Secara alami, ini menciptakan ilusi kedalaman dengan memberikan halaman sumber cahaya teoretis dan hierarki — ide yang sangat bagus untuk tata letak satu halaman.

Lihat Desain Pena Paralaks oleh Katie Rogers

7. Menggulir Paralaks Gambar Latar Belakang oleh Rich Howell

Sebelumnya, saya menyebutkan bagaimana kecepatan gulir dapat bervariasi berdasarkan tingkat perubahan posisi latar belakang. Contoh ini adalah perbandingan yang sempurna untuk melihat bagaimana ini bekerja dalam tindakan.

Perhatikan bahwa Anda harus menggunakan bilah gulir untuk melihat efek dari contoh ini. Saya mencoba dengan roda mouse dan tidak dapat melihat perbedaan apa pun, tetapi Anda akan melihat perubahan kecepatan di seluruh kolom saat Anda memindahkan bilah gulir.

Tak satu pun dari kecepatan ini adalah penggambaran desain paralaks yang salah atau tidak akurat. Itu hanya metode yang berbeda untuk membuat gerakan pada halaman, dan contoh kecil ini adalah cara yang bagus untuk memvisualisasikan banyak opsi.

Lihat Pen Scrolling Background-Image Paralax oleh Rich Howell

8. Latar Belakang Paralaks Berbintang oleh Saransh Sinha

Meskipun efek ini tidak berhubungan dengan pengguliran, ini secara langsung berhubungan dengan desain paralaks. Ini menggunakan CSS murni untuk membuat animasi bintang paralaks di latar belakang halaman. Anda dapat menambahkan teks dan bahkan area konten di atas halaman, tetapi bintang-bintang segera menciptakan kedalaman pada pandangan pertama.

Animasi berjalan melalui CSS, tetapi cuplikan ini menggunakan Sass dan Kompas, jadi akan sangat membantu untuk memahami sebelum melakukan pengeditan.

Lihat latar belakang Pena Parallax Star di CSS oleh Saransh Sinha

9. Kanvas Parallax Skyline oleh Jack Rugile

Terkadang, desain paralaks juga menargetkan gerakan mouse bersama dengan fitur gulir. Desain kanvas ini menciptakan efek cakrawala tanpa akhir yang bereaksi terhadap gerakan mouse di halaman. Saat Anda memposisikan ulang mouse, sudut pandang berubah. Namun animasinya tetap sama, dan Anda dapat melihat kaki langit ini bergerak dengan hierarki visual yang jelas.

Tentu saja, ini memang membutuhkan JavaScript untuk animasinya karena ini adalah ide yang cukup rumit. Tapi itu juga bukan sesuatu yang akan Anda temukan di banyak situs web, jadi itu juga bukan sesuatu yang akan Anda salin ke situs Anda. Tapi sebagai konsep paralaks, yang satu ini sangat menarik.

Lihat Pen Canvas Parallax Skyline oleh Jack Rugile

10. Filter Kaca Pecah oleh Bajjy Xilo

Saya telah melihat efek ini di situs web sebelumnya, membuat desain yang sangat aneh. Filter pecahan kaca memberikan ilusi gambar latar belakang yang dipecah menjadi banyak bagian berbeda. Itu hampir terlihat seperti gambar berada di panel kaca, dan itu pecah, mematahkan gambar dan memiringkan gambar.

Anda dapat mereplikasi efek ini dengan CSS murni, dan ini adalah salah satu efek rapi yang keren untuk dilakukan tetapi mungkin tidak memiliki penggunaan praktis di dunia nyata selain desain mewah. Namun, ini adalah contoh yang mengesankan dari kedalaman dan gerakan paralaks saat menggulir.

Lihat filter css Pena BrokenGlass oleh Bajjy Xilo