Parallax là gì
Đây là một kiểu hiệu ứng cuộn (scroll effect) trong đó ảnh nền di chuyển chậm hơn nội dung phía trước khi người dùng kéo trang xuống. Kết quả là trang web trông có chiều sâu, giống như nhìn qua cửa sổ khi trên xe đang chạy.
Tên gọi lấy từ ngành thiên văn: parallax (thị sai) là hiện tượng vật ở gần di chuyển nhanh hơn vật ở xa khi góc nhìn thay đổi. Web dùng lại nguyên lý đó để tạo ảo giác 3D mà không cần phần mềm đồ họa phức tạp.
Kỹ thuật này chủ yếu tạo ra bằng CSS hoặc JavaScript. Ảnh nền được đặt ở “lớp sau”, chạy với tốc độ bằng khoảng 30-50% so với lớp nội dung phía trước. Sự lệch tốc độ đó là thứ tạo ra cảm giác chiều sâu.
Parallax xuất hiện ở đâu trong một trang web
Chỗ phổ biến nhất là phần đầu trang (hero section). Người xem chỉ cần kéo trang xuống một chút là cảm nhận được: chữ tiêu đề và nút bấm đi theo ngón tay, còn ảnh phía sau cứ chậm chạp trôi. Khoảng lệch tốc độ đó tạo ra cảm giác không gian mà bố cục phẳng không có được.
Parallax còn hay xuất hiện ở trang giới thiệu công ty, portfolio (bộ sưu tập tác phẩm) và landing page (trang đích). Một số trang dùng parallax ở phần ngăn cách giữa các section (vùng nội dung) để kéo người đọc tiếp tục cuộn xuống.
Ít thấy hơn nhưng cũng có: parallax dọc trên timeline sự kiện, hoặc parallax ngang khi kéo sang phải trong gallery ảnh. Những cách dùng này phức tạp hơn và thường cần JavaScript riêng.
Ba sai lầm hay gặp nhất khi dùng parallax
Từ những web mình từng xem qua, có ba lỗi cứ lặp đi lặp lại:
Dùng khắp nơi trên cùng một trang. Parallax gây ấn tượng vì người ta không trông chờ nó. Khi mọi section đều cuộn kiểu parallax, hiệu ứng mất hết sức hút. Thay vào đó, người xem thường bắt đầu thấy chóng mặt và tắt trang sớm hơn.
Không kiểm tra trên điện thoại iPhone. Parallax thuần CSS dùng thuộc tính background-attachment: fixed không hoạt động trên Safari của iOS. Trình duyệt tự bỏ qua, ảnh nền đứng yên hoặc vỡ layout. Nếu bỏ qua bước kiểm tra này, gần một nửa người dùng Việt Nam (dùng iPhone) thấy phiên bản lỗi.
Nhét ảnh chưa nén vào lớp nền. Ảnh parallax thường phải rộng hơn màn hình để có chỗ “trôi”. Nếu ảnh gốc nặng 2-3MB mà không nén trước, trang tải chậm đáng kể, ảnh hưởng điểm LCP (Largest Contentful Paint, thời gian xuất hiện phần tử lớn nhất). Điểm LCP ảnh hưởng xếp hạng Google.
Parallax khác scroll animation ở điểm nào
Hai khái niệm này hay bị nhầm vì nhìn bề ngoài đều là “thứ gì đó chuyển động khi cuộn”. Thực ra khác nhau ở bản chất.
Parallax đặc thù ở chỗ dùng nhiều lớp chạy lệch tốc độ, tạo chiều sâu không gian. Còn scroll animation (hiệu ứng cuộn) là khái niệm rộng hơn, chỉ việc bất kỳ phần tử nào xuất hiện hoặc di chuyển khi vào tầm nhìn, từ chữ bay vào từ bên trái đến card lật khi cuộn tới. Parallax là một dạng scroll animation nhưng đặc thù hơn.
Điểm khác quan trọng về mặt kỹ thuật: parallax CSS thuần không chạy trên iOS, còn scroll animation dùng Intersection Observer API thì chạy tốt trên cả hai hệ điều hành. Nếu trang cần hỗ trợ điện thoại tốt, scroll animation an toàn hơn parallax.
Cách làm parallax đơn giản và công cụ liên quan
Cách nhanh nhất: chỉ cần hai dòng CSS.
.hero {
background-image: url('anh-nen.jpg');
background-attachment: fixed;
background-size: cover;
}Không cần JavaScript, không cần thư viện. Nhưng như đã nói, cách này không chạy trên iOS Safari. Dùng được cho trang web chủ yếu xem trên máy tính, không phù hợp nếu phần lớn người dùng dùng điện thoại.
Muốn chạy tốt trên cả iOS, cần JavaScript điều chỉnh vị trí ảnh theo sự kiện cuộn. Thư viện phổ biến: Rellax.js (nhẹ khoảng 5KB, dễ dùng), GSAP ScrollTrigger (mạnh hơn, dùng cho hiệu ứng phức tạp). Nếu dùng WordPress với Elementor hoặc Divi, hai page builder này có sẵn tính năng parallax tích hợp, không cần code thêm.
Một lựa chọn khác: Locomotive Scroll kết hợp scroll mượt và parallax trong một gói. Nặng hơn Rellax nhưng cho phép kiểm soát chi tiết từng phần tử. Phù hợp với trang portfolio hoặc trang nghệ thuật cần hiệu ứng tinh tế.
Ví dụ để dễ hình dung
Tưởng tượng trang giới thiệu một khu nghỉ dưỡng miền núi. Phần đầu trang dùng ảnh toàn cảnh núi rừng xanh. Khi cuộn xuống để đọc tiêu đề, ảnh núi trôi chậm lại phía sau trong khi chữ và nút “Xem phòng” đi nhanh hơn. Cảm giác như đang lật tờ brochure in nổi, tạo ấn tượng mạnh ngay từ giây đầu.
Nhưng cũng bài web đó, nếu thêm parallax vào ba section nữa phía dưới (ảnh hồ bơi trôi, ảnh nhà hàng trôi, ảnh spa trôi), người xem thường bắt đầu cảm thấy trang “lắc lư”, khó tập trung vào nội dung. Tác dụng ấn tượng ban đầu bị triệt tiêu hoàn toàn.
Một section parallax dùng đúng: tạo điểm nhấn. Bốn section parallax trên cùng trang: gây rối. Đó là lý do nhiều designer kinh nghiệm thường chỉ đặt parallax ở hero section, phần còn lại dùng layout tĩnh hoặc scroll animation nhẹ hơn.
Điểm mấu chốt: parallax đẹp hay không không phải do kỹ thuật, mà do người biết chỗ nào nên dừng. Một section đúng chỗ, ảnh đã nén và đã mở trên điện thoại thật để xem qua là đủ điều kiện để dùng.
Muốn hiểu thêm về các hiệu ứng khác dùng trong carousel (thanh trình chiếu ảnh) hay hero section, đọc bài về carousel là gì và hero section là gì. Để hiểu toàn cảnh nguyên tắc giao diện, bài UI/UX là gì giải thích nền tảng.
Người không rành kỹ thuật cần biết gì về parallax
Nếu đang thuê làm web và thấy mẫu thiết kế có parallax, có ba câu nên hỏi thêm trước khi đồng ý dùng.
Một: ảnh nền có được nén và chuyển sang WebP trước khi dùng không? Parallax không tự làm ảnh nhẹ hơn, mà còn đòi hỏi ảnh rộng hơn bình thường để có chỗ “trôi”. Ảnh nặng là thủ phạm số một khiến trang tải chậm.
Hai: nhóm làm có mở Safari trên máy Apple thật để xem hiệu ứng chưa, hay chỉ demo trên Chrome máy bàn? Safari iOS xử lý thuộc tính CSS dùng cho parallax theo cách riêng, dễ bỏ qua nếu chỉ test trên trình duyệt máy tính.
Ba: parallax ở trang nào, section nào? Nếu câu trả lời là “dùng khắp trang” thì nên xem lại. Người dùng cần tìm thông tin, đặt hàng, liên hệ, không phải xem phim hoạt hình. (Nhất là trang thanh toán hay trang sản phẩm, không cần hiệu ứng này.)
Một trang sử dụng parallax đúng cách thường có một điểm duy nhất, thường ở hero section, còn lại layout đơn giản, tải nhanh và dễ dùng trên điện thoại. Muốn biết thêm về sticky header là gì vì hai thứ hay xuất hiện chung trong một thiết kế.
Câu hỏi thường gặp về parallax
Parallax có làm web chậm không?
Có thể, nếu ảnh nền không được tối ưu. Ảnh parallax thường rộng hơn màn hình, nên kích thước file dễ bị bỏ qua. Nén ảnh về WebP và đặt đúng kích thước thực cần là bước không nên bỏ qua, dù dùng parallax hay không.
Tại sao parallax trông tốt trên máy tính nhưng điện thoại lại không chạy?
Apple quyết định không hỗ trợ background-attachment: fixed trên Safari iOS. Thuộc tính CSS đó bị bỏ qua hoàn toàn, ảnh nền cứng ngắc, mọi hiệu ứng chiều sâu mất hết. Cách khắc phục: thay bằng JavaScript tính offset (khoảng dịch chuyển) của ảnh theo sự kiện scroll rồi gán vào style trực tiếp, không phụ thuộc thuộc tính CSS bị iOS bỏ qua.
Parallax có ảnh hưởng đến SEO không?
Bản thân hiệu ứng cuộn không ảnh hưởng xếp hạng. Điều ảnh hưởng là tốc độ tải (ảnh nặng làm LCP chậm) và trải nghiệm người dùng (nếu parallax gây khó đọc, người ta rời trang sớm). Dùng đúng cách và tối ưu ảnh thì không có gì phải lo thêm.
Muốn thêm parallax vào WordPress thì cần làm gì?
Nếu đang dùng Elementor hoặc Divi, cả hai page builder này đều có sẵn tính năng parallax trong phần cài đặt section. Bật lên, chọn ảnh nền và điều chỉnh tốc độ là xong, không cần code. Nếu dùng theme thuần, cần thêm Rellax.js hoặc GSAP vào.
Nếu muốn xem parallax phù hợp với hướng thiết kế tổng thể của trang hay không, Web22 nhận tư vấn thiết kế UI/UX và có thể đánh giá cùng bạn trong buổi đầu.