Home » How To » Cara Membuat Parallax Pada Sebuah Website

Cara Membuat Parallax Pada Sebuah Website

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat efek scrolling “parallax” dengan CSS.

Parallax

Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat menggulir. Lihat contoh di bawah untuk melihat perbedaan antara situs web dengan dan tanpa parallax scrolling.

Menggunakan Efek Parallax Scrolling

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}
</style>
</head>
<body>

<div class="bgimg-1">
  <div class="caption">
  <span class="border">SCROLL DOWN</span>
  </div>
</div>

<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
  <h3 style="text-align:center;">Contoh Website Dengan Parallax</h3>
  <p>Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat melakukan scrolling.Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat melakukan scrolling.Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat melakukan scrolling.Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat melakukan scrolling.</p>
</div>

<div class="bgimg-2">
  <div class="caption">
  <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
  <p>Scroll ke atas dan ke bawah untuk melihat cara kerja efek Parallax Scrolling .</p>
  </div>
</div>

<div class="bgimg-3">
  <div class="caption">
  <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
  <p>Scroll ke atas dan ke bawah untuk melihat cara kerja efek Parallax Scrolling .</p>
  </div>
</div>

<div class="bgimg-1">
  <div class="caption">
  <span class="border">COOL!</span>
  </div>
</div>

</body>
</html>

Tidak Menggunakan Efek Parallax Scrolling

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-position: center;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/259631.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
</style>
</head>
<body>

<div class="bgimg-1">
  <div class="caption">
  <span class="border">SCROLL DOWN</span>
  </div>
</div>

<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
  <h3 style="text-align:center;">Contoh Website Dengan Parallax</h3>
  <p>Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat melakukan scrolling.Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat melakukan scrolling.Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat melakukan scrolling.Parallax scrolling adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan dengan kecepatan yang berbeda dari konten latar depan saat melakukan scrolling.</p>
</div>

<div class="bgimg-2">
  <div class="caption">
  <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
   <p>Scroll ke atas dan ke bawah untuk melihat cara kerja efek Parallax Scrolling .</p>
  </div>
</div>

<div class="bgimg-3">
  <div class="caption">
  <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
   <p>Scroll ke atas dan ke bawah untuk melihat cara kerja efek Parallax Scrolling .</p>
  </div>
</div>

<div class="bgimg-1">
  <div class="caption">
  <span class="border">COOL!</span>
  </div>
</div>

</body>
</html>

Catatan: Scrolling Paralaks tidak selalu berfungsi di perangkat seluler / ponsel pintar. Namun, kita dapat menggunakan kueri media untuk mematikan efeknya pada perangkat seluler .

Cara Membuat Efek Scrolling Paralaks

Gunakan elemen kontainer dan tambahkan gambar background ke kontainer dengan ketinggian tertentu. Kemudian gunakan background-attachment: fixed untuk membuat efek paralaks yang sebenarnya. Properti background lainnya digunakan untuk memusatkan dan menskalakan gambar dengan sempurna:

Contoh dengan piksel

<style>
.parallax {
  /* Gambar yang digunakan */
  background-image: url("https://dosenit.com/wp-content/uploads/2021/01/apatar.jpg");

  /* atur ketinggian yang spesifik */
  height: 500px;

  /* Buat efek scrolling parallax */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

<!-- Container element -->
<div class="parallax"></div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
  /* Gambar yang digunakan */
  background-image: url("https://dosenit.com/wp-content/uploads/2021/01/apatar.jpg");

  /* atur ketinggian yang spesifik */
  height: 500px;

  /* Buat efek scrolling parallax */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<p>Scroll ke Atas dan Bawah halaman ini untuk melihat efek parallax scrolling.</p>

<div class="parallax"></div>

<div style="height:1000px;background-color:blue;font-size:36px">
Scroll ke Atas dan Bawah halaman ini untuk melihat efek parallax scrolling.
Div ini hanya di sini untuk mengaktifkan scrolling.
Tips: Coba hapus properti lampiran background untuk menghapus efek scrolling.
</div>

</body>
</html>

Contoh di atas menggunakan piksel untuk mengatur tinggi gambar. Jika ingin menggunakan persen, misalnya 100%, untuk membuat gambar pas dengan seluruh layar, setel tinggi container paralaks ke 100%. Catatan: kita juga harus menerapkan height: 100% ke <html> dan <body>:

Contoh dengan persen

body, html {
  height: 100%;
}

.parallax {
  /* Gambar yang di pakai */
  background-image: url("https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png");

  /* Tinggi maksimal */
  height: 100%;

  /* Buat efek scrolling parallax */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
}

.parallax {
  /* Gambar yang di pakai */
  background-image: url("https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png");

  /* Tinggi maksimal */
  height: 100%;

  /* Buat efek scrolling parallax */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<div class="parallax"></div>

<div style="height:1000px;background-color:Aqua;font-size:36px">
Scroll ke Atas dan Bawah halaman ini untuk melihat efek parallax scrolling.
Div ini hanya di sini untuk mengaktifkan scrolling.
Tips: Coba hapus properti lampiran background untuk menghapus efek scrolling.
</div>

<div class="parallax"></div>

</body>
</html>

Beberapa perangkat seluler memiliki masalah dengan lampiran latar belakang: diperbaiki. Namun, Anda dapat menggunakan kueri media untuk mematikan efek paralaks untuk perangkat seluler:

Contoh

/* Matikan parallax scrolling untuk semua tablet dan ponsel. Naikkan / turunkan piksel jika perlu */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
}

.parallax {
  /* Gambar yang di pakai */
  background-image: url("https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg");

  /* Tinggi maksimal */
  height: 100%;

  /* Buat efek scrolling parallax */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Matikan parallax scrolling untuk semua tablet dan ponsel. Naikkan / turunkan piksel jika perlu */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}
</style>
</head>
<body>

<p> Dalam contoh ini kita telah menonaktifkan scrolling paralaks untuk perangkat seluler. Ini berfungsi seperti yang diharapkan pada semua ukuran layar desktop. </p>
<p> Scroll ke Atas dan Bawah halaman ini untuk melihat efek parallax scrolling. </p>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
Div ini hanya di sini untuk mengaktifkan scrolling.
Tips: Coba hapus properti lampiran background untuk menghapus efek scrolling.
</div>

<div class="parallax"></div>

</body>
</html>

You may also like