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.
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.
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
.
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.
.section
Dalam 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
.
.parallax
Dalam 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.
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
.
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.
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.
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!