Hãy khai tử hiệu ứng mờ dần khi cuộn

 (dbushell.com)
1 điểm bởi GN⁺ 2026-03-19 | 1 bình luận | Chia sẻ qua WhatsApp
  • Chỉ trích hiệu ứng ‘scroll fade’ trên website, khi các phần tử dần hiện ra lúc cuộn, vì gây khó chịu về mặt thị giác và làm tăng độ phức tạp khi phát triển
  • Bài viết cho rằng đa số cách triển khai đều dùng hiệu ứng chuyển cảnh quá mức và thời điểm không phù hợp, làm tổn hại trải nghiệm người dùng và cũng tạo thêm gánh nặng cho lập trình viên
  • Đề cập đến vấn đề khả năng truy cập và tác động tiêu cực thực tế tới người dùng, bao gồm cả những người bị rối loạn tiền đình (vestibular disorders)
  • Các hiệu ứng này có thể dẫn tới suy giảm hiệu năng và làm xấu các chỉ số Core Web Vitals (như LCP), đồng thời thường được áp dụng trong tình trạng thiếu kiểm thử và xác minh đầy đủ
  • Bài viết nhấn mạnh rằng scroll fade không phải là giải pháp nhanh gọn mà là một tính năng phức tạp cần được thiết kế ngay từ đầu, đồng thời kêu gọi ngừng sử dụng dứt khoát

Vấn đề của scroll fade

  • Scroll fade là hiệu ứng thị giác khiến phần tử dần xuất hiện khi người dùng cuộn trang xuống, thường đi kèm với biến đổi theo trục Y (transform)
    • Bài viết gọi đây là một “trải nghiệm khủng khiếp” và cho biết nó thường bị áp dụng như nhau cho tất cả người dùng
  • Tác giả chỉ ra rằng hiệu ứng này có thể chấp nhận được nếu được tinh chỉnh rất cẩn thận, nhưng trong đa số trường hợp lại bị lạm dụng đến mức gây khó chịu về thị giác
    • Bài viết nhắc đến tình huống ở giai đoạn gần hoàn thiện dự án mới xuất hiện yêu cầu “hãy làm fade cho mọi phần tử”
  • Tác giả xem đây là “một nỗ lực sai lầm nhằm loại bỏ sự nhàm chán”, nhưng trên thực tế lại khiến website trở nên cẩu thả hơn

Khả năng truy cập và tác động tới người dùng

  • Nhiều lập trình viên đưa ra khả năng truy cập (accessibility) là lý do chính để phản đối
    • Đặc biệt, người dùng mắc rối loạn tiền đình (vestibular disorders) có thể cảm thấy khó chịu vì các hiệu ứng chuyển động
    • Dù có thể bảo vệ phần nào bằng media query prefers-reduced-motion của CSS, tác giả cho rằng “chuyển động nên bị tắt theo mặc định (opt-in)”
  • Bài viết cũng nêu ra vấn đề quá tải nhận thức (cognitive overload) và phân tán sự chú ý
    • Tác giả đặc biệt đề cập rằng nhiều website được tạo trên thiết bị Apple lại hoạt động khác đi trên môi trường Windows, Linux và Android

Vấn đề về kiểm thử và hiệu năng

  • Bài viết nhấn mạnh sự cần thiết của kiểm thử với người dùng thực tế và xác minh hiệu năng trước khi áp dụng scroll fade
    • Cần xác nhận người dùng vẫn có thể hoàn thành tác vụ hay không, và liệu tỷ lệ thoát (bounce rate) có tăng lên hay không
    • Nếu không sẵn sàng kiểm thử, tác giả cảnh báo rằng “đừng chấp nhận rủi ro”
  • Tác giả cho biết script của mình đã sử dụng kỹ thuật “This CSS Will Self-Destruct” của Scott Jehl
    • Đây được giới thiệu là một cách bảo vệ trong trường hợp JavaScript bị vô hiệu hóa

Ảnh hưởng tới Core Web Vitals và SEO

  • Tác giả cho rằng scroll fade rất có thể làm xấu đi các chỉ số Core Web Vitals như Largest Contentful Paint (LCP)
    • Dù không đưa ra dữ liệu trực tiếp, tác giả nói rằng nhiều website từng kiểm tra trước đây có “LCP tệ khủng khiếp”
  • Về tác động tới SEO, tác giả giữ thái độ hoài nghi mang tính châm biếm, nhắc rằng “cũng có người nói Google cung cấp nội dung chất lượng thấp”
    • Tuy vậy, tác giả vẫn thể hiện ý định dùng bài blog này để góp phần đẩy hiệu ứng đó ra khỏi xu hướng

Kết luận: tuyên bố cấm scroll fade

  • Dưới tiêu đề “5 hiệu ứng scroll fade tuyệt vời”, tác giả kết lại bằng cách lặp lại “đừng làm” năm lần một cách châm biếm
  • Bài viết nhấn mạnh scroll fade không phải một giải pháp nhanh, mà là một tính năng phức tạp cần được thiết kế từ đầu với sự cân nhắc tới toàn bộ cấu trúc website
  • Tác giả kết thúc bằng một câu đùa rằng các lập trình viên nên đồng loạt tuyên bố “điều đó không khả thi về mặt kỹ thuật”
  • Thông điệp cuối cùng rất rõ ràng: “Hãy khai tử scroll fade (Death to scroll fade)”

Bài viết liên quan

1 bình luận

 
GN⁺ 2026-03-19
Ý kiến trên Hacker News

  • Cá nhân tôi cực kỳ ghét một yếu tố liên quan đến cuộn trang
    Đó là sticky header biến mất khi cuộn xuống rồi lại hiện ra khi cuộn lên
    Chuyển động chớp nháy đó mỗi khi lướt trang lên xuống thật sự rất khó chịu
    Nếu chặn nó bằng thứ như uBlock thì ngay cả khi ở đầu trang, header cũng biến mất luôn nên khá bất tiện

    • Hoàn toàn đồng cảm. Tôi có thói quen luôn giữ câu đang đọc ở sát mép trên màn hình, nên mỗi lần muốn đọc lại câu đó lại phải vượt qua cái header
    • Chỉ dễ dùng trên desktop thôi, nhưng có một giải pháp khá ổn
      Tôi khuyên dùng script Kill Sticky Headers
    • Safari có tính năng “Remove Distracting Elements”
      Có những website thật sự phân tâm đến mức phải mang theo cả “dụng cụ diệt côn trùng” mới chịu nổi

  • “Reader Mode” không nên là một chế độ đặc biệt mà phải trở thành trải nghiệm duyệt web mặc định
    Ngược lại, nếu muốn kiểu trình bày lòe loẹt thì nên bật “Clown Mode”

    • Tôi muốn một reader mode render cả trang thành một ảnh dài rồi chỉ việc cuộn ảnh đó
      Giá mà trình duyệt có thể đánh lừa trang rằng “toàn bộ nội dung đã ở sẵn trên màn hình” thì hay
    • Lý do reader mode không phải mặc định là vì người ta không muốn nhà làm website cố tình phá hỏng tính năng đó
    • Trên macOS và iOS, có thể đặt reader mode làm mặc định
    • Sẽ tuyệt nếu khi mở trang thì reader mode tự bật, và nếu cần có thể nhấn ESC để tắt trong vài giây
    • Cách gọi “Clown Mode” buồn cười thật. Nó làm tôi nhớ đến theme “Fisher-Price” của Windows XP ngày xưa

  • Lúc đầu tôi tưởng đang nói về iOS
    Từ iOS 26, phần trên cùng của trang web có hiện tượng fade sang màu xám, và nó cực kỳ gây khó chịu
    Màu chữ thay đổi động khiến mắt cứ liên tục bị kéo lên phía trên
    Apple không thể nào không biết kiểu gây xao nhãng thị giác này, nên tôi rất thắc mắc vì sao họ lại thiết kế như vậy

    • Một ví dụ còn tệ hơn là app Music trên iOS đã chuyển nút điều khiển phát lên đè lên nội dung theo kiểu chồng lớp trong suốt
      Nội dung bên dưới cũng bị scroll fade
    • Nếu bật “Reduce Transparency” thì phần trên và dưới chỉ biến thành khoảng trắng trống
      Trông iPhone của tôi lại giống thiết kế thời còn nút Home, khá buồn cười

  • Dù người ta nói hiệu ứng này đã lan ra khắp web, tôi thì đây là lần đầu thấy nó
    Nếu trước mắt có animation đang chạy thì tôi không thể đọc được chữ
    Dù vậy, animation cá vàng ở dưới khá đẹp nên tôi cũng muốn tận dụng riêng nó

    • Tôi thường thấy hiệu ứng này trên các trang của Anthropic
      Ví dụ ở trang Claude Agents cũng thấy rất rõ
      Có vẻ style guide của Claude đã lan sang cả những trang khác dùng LLM
    • Thật ra kiểu hiệu ứng này rất phổ biến ở các trang marketing SaaS
      Không chỉ fade-in đơn giản mà kiểu trượt từ bên cạnh vào cũng gặp rất nhiều
    • Tôi cũng đang redesign một website, và Claude từng gợi ý các animation kiểu này
      Nếu Claude tự tin đề xuất như vậy thì có lẽ đã có rất nhiều người làm theo rồi
    • Nếu làm tốt thì nó có thể trở thành một hiệu ứng tinh tế và dễ chịu để dẫn hướng ánh nhìn
      Trang này là ví dụ cố tình phóng đại để cho thấy điều đó
    • Những trang như history-of-animation.webflow.io cũng đáng tham khảo

  • Tôi nghĩ trào lưu scroll fade này là một sự hiểu nhầm bắt nguồn từ bug
    Ban đầu đó là hiện tượng nhấp nháy do lazy loading của ảnh
    Rồi các designer tưởng đó là hiệu ứng có chủ đích và bắt đầu nói kiểu “hãy làm nó fade cho đẹp”

    • Nhưng thực chất đây chỉ là kiểu thiết kế quá tay để “trông ngầu hơn”
      Có xu hướng ám ảnh với việc cuộn hơn là nội dung
    • Dù vậy, tôi vẫn thấy đây là một xu hướng riêng, không hoàn toàn chỉ là bug

  • Tôi còn muốn nói mạnh hơn — parallax scrolling cũng nên biến mất
    Tôi ước mọi animation gắn với cuộn trang đều biến hết

    • Cuộn trang chỉ cần là động tác đơn giản di chuyển một khung nhìn cố định lên xuống là đủ
    • Tất nhiên parallax ảnh tinh tế thì vẫn ổn
      Nhưng để mọi thành phần tự ý di chuyển ở các tốc độ khác nhau thì là tệ nhất
    • Tôi không phản đối animation nói chung, nhưng nếu lạm dụng vô tội vạ thì nó giống như đồ ăn bị rưới quá nhiều ketchup
    • Tôi đặc biệt ghét việc override scroll event
      Nó phá hỏng smooth scrolling của Vimium

  • Trang này đúng là đỉnh cao gây say xe
    Từ nhỏ tôi đã bị say tàu xe rất nặng, giờ đi xe buýt hay thang máy vẫn là cực hình
    Chỉ nhìn trang này vài giây thôi tôi đã thấy muốn nôn, và lập tức chuyển sang reader mode
    Dù vậy, tôi vẫn mừng vì nhận thức về những vấn đề như thế này đang tăng lên

    • Tôi cũng say xe nặng y như vậy
      Nếu không ngồi ghế lái thì rất khổ sở, mà người khác lại không hiểu điều đó
      Đặc biệt kiểu lái xe tăng tốc - giảm tốc liên tục thật sự như tra tấn
    • Mừng là không chỉ mình tôi bị vậy
      Chỉ nhìn vài phút thôi là đủ gây đau nửa đầu rồi
    • Tôi vốn không bị say xe mà vẫn thấy buồn nôn khi xem trang này
      Trải nghiệm thực sự khủng khiếp

  • Trước đây tôi từng làm việc với một khách hàng mê scrolljacking
    Khi ông ta phát hiện ra hiệu ứng parallax thì nghiện luôn, và cuối cùng sa thải tôi
    Giờ website đó giật lag trên mọi thiết bị trừ iPhone 16+

  • Một chi tiết cuối cùng khá nổi bật — có đoạn khiến chữ biến mất khi được chọn
    Trên thực tế, hiếm có website khó đọc nào mà còn để tâm đến chi tiết vụn vặt như thế

    • Thường thì họ chặn luôn việc chọn văn bản để bảo vệ “đoạn chữ thiêng liêng”

  • Khi xử lý animation, tôi dùng một quy tắc rất đơn giản

    animationCount = 0
animateElement(el) {
  el.animate({duration: BASE_DURATION / animationCount})
  animationCount++
}

    Tức là giảm dần thời lượng animation khi nó lặp lại
    Ban đầu thì mạnh, nhưng về sau ngắn dần nên tổng thể cho cảm giác nhanh gọn, nhẹ nhàng