Cara Membuat Change Background on Scroll

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 27, 2021

Di bawah ini kita akan mempelajari cara mengubah gambar latar belakang saat digulir(Change Background on Scroll) dengan menggunakan html dan CSS.

Change Background on Scroll

Scroll ke bawah di dalam bingkai untuk melihat efeknya:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* Ketinggian maksimum */
  height: 50%; 
  
  /* pusatkan dan skalakan gambar dengan baik */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Beberapa gambar yang akan digunakan*/
.img1 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg"); }
.img2 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg"); }
.img3 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg"); }
.img4 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg"); }
.img5 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg"); }
.img6 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg"); }

/* Posisikan teks ditengah gambar atau page */
.bg-text {
  background-color: rgb(0,0,0); /* Warna Cadangan*/
  background-color: rgba(0,0,0, 0.4); /* Hitam dengan opacity atau tembaus pandang */
  color: white;
  font-weight: bold;
  font-size: 50px;
  border: 10px solid #f1f1f1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>

<div class="bg-text">Simpan TEXT</div>

</body>
</html>

Cara Mengubah Change Background on Scroll

Langkah 1) Tambahkan HTML:
Contoh

<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>

<div class="bg-text">Simpan TEXT</div>

Langkah 2) Tambahkan CSS:
Contoh

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* Ketinggian maksimum */
  height: 50%; 
  
  /* pusatkan dan skalakan gambar dengan baik */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Beberapa gambar yang akan digunakan*/
.img1 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg"); }
.img2 { background-image: url("Change Background on Scroll"); }
.img3 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg"); }
.img4 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg"); }
.img5 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg"); }
.img6 { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/5562a17a0423bd89748b456b.jpeg"); }

/* Posisikan teks ditengah gambar atau page */
.bg-text {
  background-color: rgb(0,0,0); /* Warna Cadangan*/
  background-color: rgba(0,0,0, 0.4); /* Hitam dengan opacity atau tembaus pandang */
  color: white;
  font-weight: bold;
  font-size: 80px;
  border: 10px solid #f1f1f1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}