Cách thay đổi nền khi cuộn

Học cách sử dụng CSS để thay đổi ảnh nền khi cuộn.

Thay đổi ảnh nền khi cuộn

Vui lòng cuộn xuống trong khung để xem hiệu ứng:

Thử ngay

Cách thay đổi ảnh nền khi cuộn

Bước 1 - Thêm HTML:

<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">TEXT</div>

Bước 2 - Thêm CSS:

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
{}
* {
  box-sizing: border-box;
{}
.bg-image {
  /* Cao toàn bộ */
  height: 50%;
  /* Đặt ảnh giữa và điều chỉnh kích thước phù hợp */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
{}
/* Ảnh được sử dụng */
.img1 { background-image: url("img_snow.jpg"); }
.img2 { background-image: url("img_girl.jpg"); }
.img3 { background-image: url("img_lights.jpg"); }
.img4 { background-image: url("img_nature.jpg"); }
.img5 { background-image: url("img_forest.jpg"); }
.img6 { background-image: url("img_woods.jpg"); }
/* Đặt văn bản ở giữa trang hoặc hình ảnh */
.bg-text {
  background-color: rgb(0,0,0); /* Màu nền mặc định */
  background-color: rgba(0,0,0, 0.4); /* Màu đen bán trong suốt */
  color: white;
  font-weight: bold;
  font-size: 80px;
  border: 10px solid #f1f1f1;
  position: fixed; /* Giữ cố định */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
{}

Thử ngay