Parallax là gì? Những Website độc đáo với hiệu ứng parallax

Sử dụng parallax là 1 cách tuyệt vời để tạo hiệu ứng hoạt ảnh khi cuộn website, khiến trang web của bạn thêm chiều sâu, và tạo ra trải nghiệm đầy ấn tượng cho người dùng.

1. Tìm hiểu về parallax scrolling

Parallax scrolling (cuộn song song) là hiệu ứng khi các yếu tố đồ họa/ văn bản ở đằng trước chuyển động lệch với tốc độ chuyển động của nền (background), hình thành cảm giác giữa chúng có khoảng cách, khiến website của bạn có một độ sâu 3D cực tinh tế.

Tóm tắt nhanh: parallax là gì? (ColorME bổ sung, 14/10/2026)

Parallax (thị sai) là hiện tượng một vật trông như đổi vị trí so với hậu cảnh khi điểm nhìn thay đổi: vật càng gần thì trông càng dịch chuyển nhiều. Trong thiết kế web, parallax scrolling mượn đúng nguyên lý đó: nền và tiền cảnh chạy với tốc độ khác nhau khi cuộn trang, nên màn hình phẳng có cảm giác chiều sâu. Nguồn: Cơ quan Vũ trụ châu Âu (ESA) và W3C.

Ba lớp, ba quãng dịch chuyển khi cuộn trang. Hình do ColorME tự dựng.

Các mục ghi "ColorME bổ sung" dựa trên tài liệu đọc ngày 14/10/2026; phần còn lại là bài gốc.

Nếu ứng dụng hợp lý, parallax có thể đem lại những trải nghiệm vô cùng thú vị, khiến người xem ấn tượng mạnh với trang web. Tuy nhiên, nếu không được thiết kế tốt, hiệu ứng này sẽ làm cho website trở nên hỗn độn, gây khó chịu cho người dùng, làm giảm hiệu quả mục đích trang. Hãy nhớ rằng chúng ta phải thiết kế cho cả giao diện trên điện thoại, parallax scrolling có thể khiến cho thiết bị chậm lại, hoặc cản trở việc kéo trang.

2. Các website sử dụng hiệu ứng parallax

Dưới đây là tổng hợp những trang web có hiệu ứng parallax được thiết kế chỉn chu và bắt mắt, với đánh giá UX ở mức tốt.

Ghi chú (ColorME bổ sung, 14/10/2026): bài gốc không gắn liên kết tới năm trang web dưới đây, nên ColorME không kiểm tra được hôm nay chúng còn hoạt động và còn giữ hiệu ứng như mô tả hay không. Hãy xem đây là các ví dụ ở thời điểm bài được viết.

Webflow

Webflow cho chúng ta xem toàn bộ lịch sử của web bằng cách sử dụng cuộn parallax. Thật thú vị, khi cuộn xuống, bạn sẽ được thấy những minh họa của các trang mạng trước đây để biết chúng đã từng trông như thế nào.

Koxx

Sử dụng cuộn parallax và hình ảnh minh họa tươi sáng, Koox kể cho người xem tất cả về thực phẩm, nhà hàng và đầu bếp của họ một cách thú vị và nhiều tính tương tác. Người dùng còn có thể xem qua menu của họ dưới dạng cuộn nữa. (Đừng kéo xuống nếu bạn đang đói!)

ToyFight

ToyFight là tên một agency về sáng tạo và trang web của họ có là rất nhiều điều hay ho. Người sáng lập Jonny Lander và Leigh Whipday đã biến mình thành những nhân vật 3D, xuất hiện trong một loạt các cảnh trên web. Việc sử dụng parallax 1 cách thông minh đã làm nổi bật hiệu ứng 3D, kết hợp với phông nền đậm, sáng, đơn giản khiến trang web không hề bị quá ‘đầy mắt’ và khó chịu.

Peugeot Hybrid4

Peugeot đã vượt qua tất cả bằng cách sử dụng cuộn parallax để tạo truyện tranh tự động phát trong trình duyệt. Truyện sẽ phát khi bạn cuộn xuống (hoặc sử dụng tính năng tự động phát) và giúp quảng cáo công nghệ HYANCE4 mới của nhà sản xuất ô tô.

Jess & RussTrang web diễn họa lại câu chuyện lãng mạn của Jess và Russ, với cuộn parallax được sử dụng xuyên suốt để thêm chiều sâu cho các hình vẽ. Họ kết hôn vào năm 2012, nhưng trang web thì vẫn rất đẹp mắt và đáng xem.

Parallax hoạt động thế nào: các lớp và tốc độ (ColorME bổ sung, 14/10/2026)

ESA gợi ý một thử nghiệm: giơ một ngón tay trước mặt, nhắm một mắt rồi đổi mắt. Ngón tay trông như nhảy sang bên so với cảnh phía sau dù bạn không hề cử động, và ngón tay càng gần mặt thì nhảy càng xa (ESA). Hiệu ứng parallax trên màn hình giả lập điều đó bằng cách chia hình thành nhiều layer rồi cho mỗi lớp dịch chuyển một quãng khác nhau.

Thử nghiệm ngón tay của ESA, vẽ thành sơ đồ. Hình do ColorME tự dựng.

Bảng trên là cách sắp lớp thường gặp, suy ra từ nguyên lý vật gần dịch chuyển nhiều hơn; số lớp và độ lệch do người thiết kế quyết định.

Các kiểu parallax thường gặp (ColorME bổ sung, 14/10/2026)

Bốn kiểu parallax và thứ điều khiển từng kiểu. Hình do ColorME tự dựng.

Đây là cách gọi trong nghề, không phải phân loại của một tiêu chuẩn nào. Phần video thuộc về motion graphics; chuyển động nói chung được tạo ra thế nào thì có trong bài animation là gì.

Cách làm hiệu ứng parallax trên web bằng CSS (ColorME bổ sung, 14/10/2026)

Ba cách làm parallax bằng CSS và mức hỗ trợ theo MDN. Hình do ColorME tự dựng.

Nền đứng yên: background-attachment: fixed

Theo MDN, thuộc tính background-attachment quyết định ảnh nền cố định trong khung nhìn (viewport) hay cuộn theo khối chứa nó. Với giá trị fixed, nền không di chuyển cùng phần tử, nên nội dung trượt qua một tấm nền đứng yên. Đây là dạng đơn giản nhất và chỉ có hai tốc độ. MDN xếp thuộc tính này vào nhóm Baseline, dùng được trên các trình duyệt từ tháng 7/2015, kèm ghi chú rằng một số phần có mức hỗ trợ khác nhau. ColorME chưa đọc được bảng tương thích chi tiết hôm nay, nên hãy thử trên điện thoại thật trước khi dùng.

Chiều sâu thật: perspective và translateZ

MDN định nghĩa perspective là khoảng cách giữa mặt phẳng z=0 và người xem; phần tử có z lớn hơn 0 trông to ra, z nhỏ hơn 0 trông nhỏ lại. Cách làm thường gặp là đặt perspective cho khung cuộn rồi đẩy các lớp nền ra xa bằng translateZ() với giá trị âm, để trình duyệt tự tính độ lệch giữa các lớp. MDN ghi perspective dùng được trên các trình duyệt từ tháng 9/2015.

Animation chạy theo thanh cuộn: animation-timeline

Theo MDN, animation-timeline chọn dòng thời gian điều khiển một animation CSS. Mặc định đó là thời gian trôi qua; với scroll(), tiến độ đi theo việc cuộn một vùng cuộn (MDN); với view(), tiến độ đi theo mức độ phần tử hiện ra trong vùng cuộn gần nhất: 0% khi nó vừa ló vào ở một mép, 100% khi nó ra khỏi mép đối diện (MDN). Ví dụ của ColorME:

@keyframes troi-nen {
  from { transform: translateY(-40px); }
  to { transform: translateY(40px); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lop-nen {
      animation: troi-nen 1ms linear;
      animation-timeline: view();
    }
  }
}

Ví dụ trong bài: lớp nền đi từ -40px tới 40px. Hình do ColorME tự dựng.

Ba điều cần nhớ, đều theo MDN:

• animation-timeline phải khai báo sau thuộc tính gộp animation, vì animation đặt lại nó về auto.
• Thời lượng không quyết định tốc độ của animation theo thanh cuộn, nhưng Firefox cần một thời lượng khác 0, nên người ta thường ghi 1ms (MDN).
• Tính năng này chưa thuộc Baseline: MDN ghi nó chưa chạy trên một số trình duyệt phổ biến. Vì vậy ví dụ bọc trong @supports; trình duyệt chưa hỗ trợ sẽ thấy lớp nền đứng yên, trang vẫn đọc được.

Các mốc from và to chính là keyframe, chỉ khác ở chỗ thanh cuộn đóng vai timeline.

Hiệu năng: vì sao parallax dễ làm trang giật (ColorME bổ sung, 14/10/2026)

Bài gốc nhắc rằng parallax có thể làm thiết bị chậm lại. Tài liệu của Google và Mozilla giải thích cách tránh:

• Chỉ animate transform và opacity khi có thể. web.dev khuyên tránh mọi thuộc tính khiến trình duyệt phải tính lại bố cục (layout) hoặc vẽ lại (paint), trừ khi thật cần.
• Dịch chuyển bằng transform, không bằng top hay left. web.dev ghi animation di chuyển phần tử bằng cách khác ngoài transform nhiều khả năng sẽ chậm.
• Dùng will-change dè dặt. web.dev chỉ khuyên dùng khi đã gặp vấn đề, vì tạo thêm lớp cũng có thể gây lỗi hiệu năng khác.
• Ưu tiên animation CSS. MDN viết rằng khi phần tử được đưa lên một lớp riêng, việc animate transform có thể chạy trên GPU, hiệu quả hơn, nhất là trên di động.

Khả năng tiếp cận: không phải ai cũng chịu được chuyển động (ColorME bổ sung, 14/10/2026)

Tiêu chí WCAG 2.3.3 Animation from Interactions (mức AAA) yêu cầu: chuyển động do tương tác gây ra phải tắt được, trừ khi nó thiết yếu cho chức năng hoặc thông tin. W3C nêu đích danh parallax scrolling là loại animation thường không thiết yếu, và cho biết chuyển động khi cuộn có thể gây chóng mặt, buồn nôn, đau đầu ở người bị rối loạn tiền đình.

W3C gợi ý ba hướng: bỏ animation không cần thiết, cho người dùng một nút tắt, hoặc tôn trọng cài đặt giảm chuyển động của hệ điều hành. Hướng thứ ba làm bằng media query prefers-reduced-motion, mà MDN ghi là dùng được trên các trình duyệt từ tháng 1/2020. Ví dụ ở trên dùng cách đảo mà kỹ thuật C39 của W3C mô tả: trang mặc định đứng yên, chỉ thêm chuyển động khi người dùng không yêu cầu giảm (no-preference).

Muốn tự thử, MDN chỉ chỗ bật: iOS ở Settings > Accessibility > Motion; Android 9 trở lên ở Settings > Accessibility > Remove animations; Windows 11 ở Settings > Accessibility > Visual Effects > Animation Effects.

Parallax trong Figma và After Effects (ColorME bổ sung, 14/10/2026)

Figma. Trang trợ giúp của Figma về cuộn trong prototype không nhắc tới parallax. Mỗi layer chỉ nhận một trong ba vị trí cuộn: Scroll with parent, Fixed (đứng yên khi cuộn) hoặc Sticky (cuộn rồi dính lại ở mép trên khung). Figma còn tự đưa layer Fixed lên trên các layer khác, nên theo trang này bạn không đặt được một tấm nền Fixed nằm dưới nội dung đang cuộn. Fixed và Sticky hợp để thử thanh điều hướng hay tiêu đề dính; còn các lớp trôi lệch tốc độ thì nên mô tả kèm bản thiết kế hoặc dựng thử bằng code. Xem thêm prototype là gì.

After Effects. Theo Adobe, khi chuyển một layer sang 3D, các thuộc tính Position, Anchor Point và Scale có thêm giá trị chiều sâu (z); layer mặc định nằm ở z bằng 0, z tăng dần từ gần ra xa, và layer 3D được render theo góc nhìn của camera đang hoạt động. Cách làm 2.5D thường gặp dựa trên đúng các điểm đó: tách ảnh thành vài lớp, bật 3D, đặt mỗi lớp một giá trị z khác nhau rồi đặt keyframe cho camera di chuyển nhẹ. Nền tảng về giao diện và layer có trong giáo trình After Effects cơ bản.

Nếu chỉ có một tấm ảnh, công cụ tạo depth map của ColorME tự giới thiệu là tạo bản đồ chiều sâu "dùng cho hiệu ứng parallax, 3D, Blender, After Effects". Trang công cụ hướng dẫn: "Tải depth map về, dùng làm lớp điều khiển cho hiệu ứng Displacement Map hoặc plugin parallax, rồi di chuyển camera nhẹ để ảnh tĩnh có chiều sâu."

Khi nào nên dùng parallax, khi nào không (ColorME bổ sung, 14/10/2026)

Những lỗi thường gặp:

• Quá nhiều lớp, độ lệch quá lớn. Người xem mất phương hướng, đúng nỗi lo "hỗn độn" mà bài gốc nêu.
• Chỉ thử trên máy tính. Thử trên điện thoại thật, kể cả máy yếu.
• Quên prefers-reduced-motion. Xem phần khả năng tiếp cận ở trên.
• Dùng ảnh nền quá nặng. Hình minh hoạ phẳng nên xuất ở định dạng vector; xem SVG là gì.
• Dùng hiệu ứng thay cho nội dung. Parallax chỉ là một phần của trải nghiệm; bức tranh chung có trong bài UI/UX là gì và mục từ animation.

Câu hỏi thường gặp về parallax (ColorME bổ sung, 14/10/2026)

Parallax angle (góc thị sai) là gì?

Trong thiên văn, đó là độ dịch chuyển biểu kiến của một ngôi sao so với nền sao xa khi Trái Đất đi nửa vòng quỹ đạo, tức sau 6 tháng. Biết góc này và khoảng cách Mặt Trời tới Trái Đất, nhà thiên văn tính được khoảng cách tới ngôi sao bằng lượng giác (ESA).

Parallax effect và parallax scrolling khác nhau thế nào?

Parallax effect (hiệu ứng parallax) là tên chung cho mọi cách tạo chiều sâu bằng các lớp dịch chuyển lệch nhau. Parallax scrolling là trường hợp hiệu ứng được điều khiển bằng việc cuộn trang, như định nghĩa của W3C ở đầu bài.

Viết parallax hay paralax?

Viết đúng là "parallax", hai chữ l. ESA, W3C và MDN đều viết như vậy.

___

Chúng đều rất độc đáo và thu hút phải không nào? Vẫn còn rất nhiều điều lý thú khác nữa xoay quanh thiết kế giao diện web đang chờ bạn khám phá. Nếu như bạn đang muốn tìm hiểu thêm về mảng kiến thức này, hãy thử bắt đầu với khóa học UI UX tại colorME nhé, chúng mình rất sẵn sàng làm người trợ thủ đắc lực cho khởi đầu của bạn!