Tam giác ma thuật của Amazon

Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với di chuyển thời gian thực của con trỏ.



Tôi vốn nghĩ tốc độ tức thì khi di chuyển con trỏ là điều không thể. Tất cả các menu đều cần một ít delay để thay đổi nội dung của submenu. Bạn có thể nhìn ví dụ dưới đây.



Bạn có biết tại sao lại cần delay không? Nếu không có một chút delay đó, khi bạn di con trỏ ra khỏi menu chính tới submenu nhỏ hơn thì submenu sẽ biến mất ngay khi bạn chưa kịp di chuột đến, tạo ra một hiệu ứng đuổi bắt rất khó chịu cho người dùng. Nếu bạn chưa hiểu lắm thì thử nhìn Bootstrap bug dưới đây nhé:


Tam giác ma thuật của Amazon

Vậy là Amazon đã làm thế nào để vẫn đem lại UX hoàn hảo trong khi không có một tí delay nào ? Chúng ta không thấy Bootstrap bug, và tốc độ thì hẳn là tức thì. Câu trả lời là hình tam giác được đánh dấu dưới đây

  • Ở mọi thời điểm, Amazon vẽ ra 1 tam giác với 1 đỉnh là vị trí con trỏ hiện tại và 2 đỉnh còn lại là đỉnh và đáy của submenu.
  • Vị trí tiếp theo của con trỏ được kiểm tra xem có nằm trong tam giác này hay không
  • Nếu con trỏ vẫn nằm trong hình tam giác, thì Amazon "phán đoán" là user đang dịch chuột về submenu và giữ nguyên nội dung.
  • Nếu con trỏ đi ra ngoài thì xét lại vị trí để tìm submenu cũ hay mới.
Những chi tiết nhỏ như thế này tạo ra những trải nghiệm UX tuyệt vời cho người dùng. Nếu bạn muốn sử dụng lại hiệu ứng này thì rất may là có 1 Jquery plugin rồi nhé jQuery-menu-aim :)

Tự động đánh dấu chap truyện đang đọc tại hocvientruyentranh.com

Chuyện là rất là không hài lòng với chức năng đánh dấu truyện của site. Muốn đánh dấu trang nào, bạn phải click vào nút "Đánh dấu" góc trên bên phải của truyện. Lâu lâu quên béng mất nhấn nút đó để rồi lần sau không biết là mình đang đọc tới đâu nữa luôn. Vì thế mình viết đoạn script nhỏ này để tự động làm việc đó. Tất nhiên bạn phải đăng nhập và đã nhấn "Theo dõi" truyện đó trước.


B1: Bạn cài addon Tampermonkey (Chrome)
B2: Cài đặt script tại https://raw.githubusercontent.com/mrcyclo/hocvientruyentranh/master/hocvientruyentranh.user.js
B3: Truy cập vào site http://hocvientruyentranh.com và chờ trang load hết

B4: Dùng thử và cảm nhận

Screenshot: