Tutorial
Cara Membuat Efek Gulir Parallax Menggunakan Murni CSS Saja di Chrome
Pengantar
CSS modern adalah alat bantu andal yang dapat Anda gunakan untuk membuat banyak fitur Antarmuka Pengguna (UI) mutakhir. Dahulu, fitur ini mengandalkan pustaka JavaScript.
Dalam panduan ini, Anda akan menyiapkan beberapa baris CSS untuk membuat efek gulir parallax pada halaman web. Anda akan menggunakan gambar dari placekitten.com sebagai gambar latar belakang penampung.
Anda akan memiliki halaman web dengan efek gulir parallax yang murni menggunakan CSS saja setelah menyelesaikan tutorial.
Peringatan: Artikel ini menggunakan properti CSS eksperimental yang tidak berfungsi di semua peramban. Proyek ini telah diuji dan berfungsi di Chrome. Teknik ini kurang berhasil di Firefox, Safari, dan iOS karena adanya beberapa optimalisasi di peramban-peramban tersebut.
Langkah 1 — Membuat Proyek Baru
Dalam langkah ini, gunakan baris perintah untuk menyiapkan folder dan berkas proyek baru. Untuk memulai, buka terminal Anda dan buat folder proyek baru.
Ketikkan perintah berikut untuk membuat folder proyek:
- mkdir css-parallax
Dalam hal ini, Anda menamai folder tersebut css-parallax. Sekarang, masuk ke folder css-parallax:
- cd css-parallax
Selanjutnya, buat berkas index.html di folder css-parallax dengan perintah nano:
- nano index.html
Anda akan menempatkan semua HTML untuk proyek ke dalam berkas ini.
Di langkah selanjutnya, Anda akan mulai membuat struktur halaman web.
Langkah 2 — Menyiapkan Struktur Aplikasi
Dalam langkah ini, Anda akan menambahkan HTML yang diperlukan untuk membuat struktur proyek.
Di dalam berkas index.html, tambahkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Scrolling Parallax</title>
</head>
<body></body>
</html>
Ini adalah struktur dasar kebanyakan halaman web yang menggunakan HTML.
Tambahkan kode berikut di dalam tag <body>:
<body>
...
<main>
<section class="section parallax bg1">
<h1>Cute Kitten</h1>
</section>
<section class="section static">
<h1>Boring</h1>
</section>
<section class="section parallax bg2">
<h1>Fluffy Kitten</h1>
</section>
</main>
...
</body>
Kode ini menghasilkan tiga bagian berbeda. Dua bagian akan memiliki gambar latar belakang, dan satu lagi akan berupa latar belakang statis dan polos.
Dalam beberapa langkah selanjutnya, Anda akan menambahkan gaya untuk setiap bagian menggunakan kelas yang Anda tambahkan di HTML.
Langkah 3 — Membuat Berkas CSS dan Menambahkan CSS Awal
Dalam langkah ini, Anda akan membuat sebuah berkas CSS. Kemudian, Anda akan menambahkan CSS awal untuk menata gaya situs web dan membuat efek parallax.
Pertama, buat berkas styles.css di folder css-parallax dengan perintah nano:
- nano styles.css
Di sinilah Anda akan menempatkan semua CSS yang diperlukan untuk membuat efek gulir parallax.
Selanjutnya, mulai dengan kelas .wrapper. Di dalam berkas styles.css, tambahkan kode berikut:
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
Kelas .wrapper mengatur properti perspective dan scroll untuk keseluruhan halaman.
Tinggi pelipat perlu diatur ke nilai tetap agar efek dapat berfungsi. Anda dapat menggunakan unit vh viewport yang telah diatur ke 100 untuk mendapatkan ketinggian penuh viewport layar.
Bila Anda mengatur skala gambar, bilah gulir horizontal akan ditambahkan ke layar, sehingga Anda dapat menonaktifkannya dengan menambahkan overflow-x: hidden;. Properti perspective mensimulasikan jarak dari viewport ke elemen semu yang akan Anda buat dan transformasikan lebih jauh di CSS.
Di langkah selanjutnya, Anda akan menambahkan CSS lainnya untuk menata gaya halaman web.
Langkah 4 — Menambahkan Gaya untuk Kelas .section
.sectionDalam langkah ini, Anda akan menambahkan gaya ke kelas .section.
Di dalam berkas style.css, tambahkan kode berikut di bawah kelas wrapper:
.wrapper {
height: 100vh;
overflow-x: hidden;
perspective: 2px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
Kelas .section mendefinisikan properti ukuran, tampilan, dan teks untuk bagian utama.
Atur posisi relative agar anak, .parallax::after dapat sepenuhnya diposisikan secara relatif ke elemen induk .section.
Setiap bagian memiliki view-height(vh) sebesar 100 untuk mengambil ketinggian penuh viewport. Nilai ini dapat diubah dan diatur ke ketinggian apa pun yang Anda sukai untuk setiap bagian.
Terakhir, properti CSS selebihnya digunakan untuk memformat dan menambahkan penataan gaya pada teks di dalam setiap bagian. Properti ini memosisikan teks di tengah setiap bagian dan menambahkan warna white (putih).
Selanjutnya, Anda akan menambahkan elemen semu dan menata gayanya untuk membuat efek parallax pada dua bagian di HTML.
Langkah 5 — Menambahkan Gaya untuk Kelas .parallax
.parallaxDalam langkah ini, Anda akan menambahkan gaya ke kelas .parallax.
Pertama, Anda akan menambahkan elemen semu di kelas .parallax yang akan diberi gaya.
Catatan: Anda dapat mengunjungi dokumentasi web MDN untuk mempelajari lebih lanjut tentang elemen semu CSS.
Tambahkan kode berikut di bawah kelas .section:
...
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
...
Kelas .parallax menambahkan elemen semu ::after ke gambar latar belakang dan menyediakan transformasi yang diperlukan untuk efek parallax.
Elemen semu adalah anak terakhir dari elemen dengan kelas .parallax.
Paruh pertama dari kode menampilkan dan memosisikan elemen semu. Properti transform menjauhkan elemen semu dari kamera di z-index, lalu menskalakannya kembali untuk mengisi viewport.
Karena elemen semu menjauh, seakan-akan bergerak lebih lambat.
Di langkah selanjutnya, Anda akan menambahkan gambar latar belakang dan gaya latar belakang statis.
Langkah 6 — Menambahkan Gambar dan Latar Belakang untuk Setiap Bagian
Dalam langkah ini, Anda akan menambahkan properti CSS terakhir untuk menambahkan gambar latar belakang dan warna latar belakang bagian statis.
Pertama, tambahkan warna latar belakang pekat ke bagian .static dengan kode berikut setelah kelas .parallax::after:
...
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.static {
background: red;
}
...
Kelas .static menambahkan latar belakang ke bagian statis yang tidak memiliki gambar.
Kedua bagian dengan kelas .parallax juga memiliki kelas ekstra yang masing-masing berbeda. Gunakan kelas .bg1 dan kelas .bg2 untuk menambahkan gambar latar belakang Kitten.
Tambahkan kode berikut ke kelas .static:
...
.static {
background: red;
}
.bg1::after {
background-image: url('https://placekitten.com/g/900/700');
}
.bg2::after {
background-image: url('https://placekitten.com/g/800/600');
}
...
Kelas .bg1, .bg2 menambahkan masing-masing gambar latar belakang untuk setiap bagian.
Gambar dari situs web placekitten. Ini adalah layanan untuk mendapatkan gambar anak kucing untuk digunakan sebagai penampung.
Karena semua kode untuk efek gulir parallax telah ditambahkan, Anda dapat menautkan ke berkas styles.css di index.html.
Langkah 7 — Menautkan styles.css dan Membuka index.html di Peramban
styles.css dan Membuka index.html di PerambanDalam langkah ini, Anda akan menautkan berkas styles.css dan membuka proyek di peramban untuk melihat efek gulir parallax.
Pertama, tambahkan kode berikut ke tag <head> di berkas index.html:
[label css-parallax/index.html] ...
<head>
<meta charset="UTF-8" />
<^>
<link rel="stylesheet" href="styles.css" />
<^>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Parallax</title>
</head>
...
Sekarang, Anda dapat membuka berkas index.html di peramban:
Dengan demikian, Anda telah menyiapkan halaman web yang berfungsi dengan efek gulir. Lihatlah repositori GitHub ini untuk mengetahui kode selengkapnya.
Kesimpulan
Dalam artikel ini, Anda menyiapkan proyek dengan berkas index.html dan styles.css serta sekarang memiliki halaman web yang fungsional. Anda telah menambahkan struktur halaman web dan membuat gaya untuk berbagai bagian di situs.
Anda bisa saja menempatkan gambar yang digunakan atau membuat efek parallax menjauh sehingga gerakannya menjadi lebih lambat. Anda harus mengubah jumlah piksel pada properti perspective dan transform. Jika Anda tidak ingin gambar latar belakang bergulir sama sekali, gunakan background-attachment: fixed; sebagai ganti perspective/translate/scale.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
author
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Featured on Community
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.