Tạo hiệu ứng Parallax Scrolling với CSS

Parallax scrolling là hiệu ứng nền cuộn chậm hơn nội dung trước mặt, tạo cảm giác chiều sâu. Cách đơn giản nhất dùng background-attachment: fixed.

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh;
    margin: 0px;
    padding: 0px;
  }
  .parallax {
    background-image: url("https://i.picsum.photos/id/250/800/800.jpg");
    height: 100%;
    background-attachment: fixed; /* Then chốt */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .parallaxText {
    font-size: 20px;
    height: 100%;
  }
</style>
</head>
<body>
<div class="parallax"></div>
<div class="parallaxText">
  <h1>Một số văn bản ngẫu nhiên</h1>
  <h1>Một số văn bản ngẫu nhiên</h1>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="parallax"></div>
</body>
</html>

Giải thích

• background-attachment: fixed - Nền cố định so với viewport, không cuộn cùng element
• background-size: cover - Lấp đầy vùng chứa, cắt bớt nếu cần
• height: 100% - Chiều cao section parallax

Vấn đề trên Mobile

background-attachment: fixed thường không hoạt động hoặc gây lag trên iOS Safari và Android Chrome. Giải pháp:

@media (max-width: 768px) {
  .parallax { background-attachment: scroll; }
}

Cách nâng cao (JS)

Dùng JavaScript tính window.scrollY và cập nhật background-position-y hoặc transform: translateY() trên pseudo-element để kiểm soát tốc độ parallax chính xác và mượt trên mobile.