Tạo hiệu ứng Parallax đơn giản chỉ với CSS thuần

Xin chào tất cả các bạn, mình là Quân, như tiêu đề bài viết hôm nay mình sẽ hướng dẫn các bạn làm hiệu ứng Parallax đơn giản chỉ với HTML và CSS thuần nha. Về Parallax nâng cao hơn cần dùng tới JavaScript thì mình sẽ viết ở một bài khác nhé.

“Bài này nằm trong loạt bài Tổng hợp kiến thức hữu ích cho lập trình viên trên trang blog chính thức trungquandev.com“

Những nội dung có trong bài:

Parallax trong CSS là gì?
Giải thích cách làm và Triển khai code Parallax

1. Parallax trong CSS là gì?

Đầu tiên mình sẽ show luôn một cái video ngắn demo kết quả như này luôn nhé.

Parallax hay nói đầy đủ Parallax Scrolling Effect (hiệu ứng thị sai) trong CSS là một Tip CSS nhỏ giúp bạn tạo sự thu hút trên trang web đối với người dùng, đặc biệt là các trang Landing Page.

Về mặt kỹ thuật, mình đọc trên google thấy nhiều trang nước ngoài mỗi trang lại định nghĩa mỗi khác một chút, riêng mình thì rút ra kết luận đơn giản thế này cho dễ hiểu nhé: “Parallax Scrolling Effect là cách làm cho các hình ảnh nền – Background di chuyển với tốc độ khác nhau khi người dùng cuộn trang web. Và nó tạo ra một cảm giác có chiều sâu đối với thị giác của chúng ta khi nhìn vào.”

Các bạn có thể vào trang Codepen và tìm từ khóa Parallax sẽ thấy rất nhiều ví dụ từ đơn giản tới phức tạp có sử dụng tới nhiều Javascript nhé, còn trong nội dung bài hôm nay, mình sẽ hướng dẫn các bạn làm ví dụ ở trên theo cách chỉ sử dụng CSS thuần thôi nha.

(Ngoài lề quen thuộc: Cảnh báo này dành cho bất kể trang nào khác mà có ý định copy bài không phải của các bạn thì hãy tôn trọng người viết bài chân chính, tuyệt đối không được xào nấu, chỉnh sửa linh tinh bài viết của mình cụ thể là không được xóa những liên kết (link) cũng như tự ý xóa các câu thoại của mình trong toàn bộ bài viết rồi post lại lên trang của các bạn như kiểu đây là bài của các bạn vậy, nếu tham khảo thì hãy để lại liên kết nguồn rõ ràng từ trang trungquandev, mình sẽ thường xuyên dùng tool để check, và nếu phát hiện ra thì cứ đơn giản là chắc chắn sẽ ăn report DMCA nhé.)

2. Giải thích cách làm và Triển khai code Parallax

Nếu bạn nào làm theo post này gặp vấn đề hoặc muốn xem hướng dẫn bằng video thì mình cũng có làm sẵn một video hướng dẫn lại rất chi tiết ở link này nha:

Link to YouTube: Trungquandev Official

Đầu tiên các bạn tạo cho mình 2 file là index.html và style.css nhé, chỉ cần 2 file này là đủ.

Copy + Paste code dưới đây vào file index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="./resources/favicon/logo-trungquandev-transparent-bg-256x256-ico.ico" sizes="16x16">
  <title>Parallax - Trungquandev</title>
  <link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
  <div class="content-wrapper">
    <div class="parallax">
      <div class="parallax-image" style="background-image: url('./resources/parallax-css-trungquandev-02.jpg');"></div>
      <div class="content">Hey there!</div>
    </div>
    <div class="static">
      <div class="sub-content">Pure CSS Parallax Scrolling Effect</div>
    </div>
    <div class="parallax">
      <div class="parallax-image" style="background-image: url('./resources/parallax-css-trungquandev-03.jpg');"></div>
      <div class="content">I'm Trungquandev!</div>
    </div>
    <div class="static">
      <div class="sub-content">Pure CSS Parallax Scrolling Effect</div>
    </div>
    <div class="parallax">
      <div class="parallax-image" style="background-image: url('./resources/parallax-css-trungquandev-04.jpg');"></div>
      <div class="content">From the Earth!</div>
    </div>
    <div class="static">
      <div class="sub-content">
        <div>Thank you!</div>
        <div><a href="https://trungquandev.com" target="_blank" rel="noopener noreferrer">Blog: https://trungquandev.com</a></div>
        <div><a href="https://cv.trungquandev.com" target="_blank" rel="noopener noreferrer">CV: https://cv.trungquandev.com</a></div>
        <div><a href="https://www.youtube.com/c/TrungquandevOfficial" target="_blank" rel="noopener noreferrer">YouTube: Trungquandev Official</a></div>
        <div><a href="https://www.vecteezy.com/" target="_blank" rel="noopener noreferrer">Credit to the images from: https://www.vecteezy.com/</a></div>
      </div>
    </div>
  </div>
</body>
</html>

Ở đoạn code trên các bạn chỉ cần để ý cho mình cấu trúc HTML bên trong body nhé, toàn bộ code sẽ bọc trong một thẻ div to nhất có class là .content-wrapper, tiếp theo là các thẻ div .parallax và .static xen kẽ nhau.

Bên trong .parallax sẽ có thẻ .parallax-image để chứa cái ảnh background-image, còn phần .content với .sub-content thì là những text đơn giản rồi nha. Đối với ảnh để làm demo bài này thì mình lấy ở trang web vecteezy.com, Các bạn có thể lấy bất kỳ ảnh nào các bạn thích, còn nếu muốn lấy ảnh giống như mình làm demo thì cứ lên luôn Repo GitHub này của mình (Thư mục số 5) để lấy cho nhanh nha.
– https://github.com/trungquandev/trungquandev-public-utilities-algorithms

Cũng để ý luôn cho mình là ở file index.html trên mình đã có dòng code này để link tới file style.css nhé

<link rel="stylesheet" href="./style.css" type="text/css">

Đối với file style.css, đầu tiên hãy copy và paste đoạn code này vào trước:

body {
  margin: 0;
}

.content-wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* ... */
}

.parallax,
.static {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.parallax {
  height: 100vh;
  /* ... */
}

.static {
  height: 80vh;
  z-index: 999;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

.parallax>.parallax-image {
  position: absolute;
  width: 100%;
  height: 100%;
  /* ... */
}

.content {
  font-size: 6rem;
  /* ... */
}
.sub-content {
  font-size: 2rem;
  text-align: center;
}
.sub-content a {
  color: inherit;
  font-size: 1.5rem;
  text-decoration: none;
}
.sub-content a:hover {
  color: #1dd1a1;
}

Những cái CSS ở trên đều là các CSS cơ bản như flex, width, height , font, color…vv các thứ nên mình sẽ không giải thích lại nhé, bạn nào muốn học kỹ hơn thì mình có một Series về TailwindCSS hướng dẫn làm những cái css trên rất chi tiết ở đây nha.
TailwindCSS Thực Chiến • Tạo một trang Coffee Style Landing Page siêu đẹp.

Chú ý cho mình: những cái đoạn mà mình comment dấu ba chấm như này: /* … */
– Bây giờ mình sẽ thêm code vào các phần có comment đó nhé.
*** Có thể tóm gọn cách để làm cái Parallax chỉ bằng CSS thuần thì chúng ta sẽ “Tăng khoảng cách nhìn vào giữa người dùng và màn hình (perspective), sau đó dịch chuyển nó theo trục Z (với giá trị âm) trên không gian 3d và Scale tăng kích thước phần tử lên.
Bởi vì khi dùng perspective để tăng khoảng cách nhìn nghĩa là phần tử con bên trong của chúng ta sẽ hiển thị nhỏ hơn.”
*** Chúng ta sẽ sử dụng 3 thuộc tính CSS là perspective để tăng khoảng cách, transform: translateZ() kết hợp scale() trên không gian 3d: transform-style: preserve-3d; để đạt được mục đích ở trên nhé.

Lần lượt từ phần tử .content-wrapper (thêm cho mình perspective cho vụ tăng khoảng cách nhìn)

.content-wrapper {
  /* ... */
  perspective: 2px;
}

Đến phần tử .parallax (đảm bảo các phần tử con bên trong nó được định vị trên không gian 3d)

.parallax {
  /* ... */
  transform-style: preserve-3d;
}

Tiếp đến là phần tử .parallax-image (đối với translateZ – di chuyển trên không gian 3d, nếu chúng ta set giá trị dương lớn hơn 0 thì phần tử sẽ lớn hơn giống kiểu zoom to lên và nếu giá trị âm thì ngược lại sẽ nhỏ hơn)

.parallax>.parallax-image {
  /* ... */
  transform: translateZ(-1px) scale(1.5);
  z-index: -1;
  background-size: cover;
  background-position: center;
}

Cuối cùng là phần tử .content (dùng translateZ giá trị dương và scale thêm chút để khi scroll nó chạy nhanh hơn)

.content {
  /* ... */
  transform: translateZ(1px) scale(.5);
}

Và kết quả cuối cùng thì cũng như video mà mình đã show ở trên kia cũng như có demo trên YouTube nha:

Link to YouTube: Trungquandev Official (đang cập nhật)

4. Chia sẻ full toàn bộ Source Code của bài hôm nay trên Github

Vậy là kết thúc bài hôm nay mình đã hướng dẫn xong cách tạo hiệu ứng Parallax đơn giản bằng CSS thuần nhé.

Mình có để full source code của bài hôm nay ở repo này (Thư mục số 5) cho các bạn tham khảo giống như mọi lần, các bạn có thể clone về và làm theo các bước hướng dẫn mà mình có để trong file README nhé, chỉ có vài bước khá dễ dàng thôi.
https://github.com/trungquandev/trungquandev-public-utilities-algorithms

Và nếu thấy bài viết cũng như video bổ ích, hãy ủng hộ mình bằng cách Đăng ký kênh Youtube Trungquandev Official để mình có động lực tiếp tục viết những bài viết hay cũng như ra thêm nhiều video chất lượng hơn nữa nha, cảm ơn các bạn nhiều !!!
https://www.youtube.com/c/TrungquandevOfficial

Cảm ơn các bạn đã dành thời gian đọc bài viết.

Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.

Best Regards – 💻 Trungquandev Official ❤

Tham khảo kiến thức:

https://codepen.io/search/pens?q=parallax
https://alvarotrigo.com/blog/how-to-create-a-parallax-effect-with-css-only/

Nguồn ảnh mình sử dụng:

https://www.vecteezy.com/

“Thanks for awesome knowledges.”
“ From author: trungquandev ”

Trên YouTube mình dạy hết từ Front-end cho đến Back-end, FREE công khai nha. Đã có rất nhiều bạn học bộ MERN Stack Pro này của mình và để lại feedback chất lượng dưới nhiều video rồi. Các bạn hãy tham khảo trang Landing Page mình giới thiệu toàn bộ MERN Stack (ReactJS, NodeJS, MongoDB, ExpressJS...vv) ở đây nhé.
KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG

mern-stack-reactjs-nodejs-expressjs-mongodb-trello-dnd-kit-trungquandev-codetq

Tạo hiệu ứng Parallax đơn giản chỉ với CSS thuần

1. Parallax trong CSS là gì?

2. Giải thích cách làm và Triển khai code Parallax

4. Chia sẻ full toàn bộ Source Code của bài hôm nay trên Github

Khóa học lập trình làm việc thực tế:

Git – GitHub • Học Git thực tế để đi làm

NodeJS viết API gửi Email với OAuth2 và Nodemailer

Related Posts