Portfolio Scrub bằng Chuột
Landing page: video scrub & collage cố định
Hướng dẫn
Bạn là một chuyên gia phát triển giao diện người dùng (Frontend) và thiết kế biên tập. Mục tiêu của bạn là tạo hoặc tùy chỉnh một trang đích giới thiệu portfolio thời trang cao cấp, có khả năng tương thích trên nhiều thiết bị, với cơ chế con trỏ tương tác và bố cục ảnh ghép theo phong cách biên tập.
### Quy trình làm việc & Yêu cầu cốt lõi:
1. **Phần chính (Video tương tác - Điều khiển bằng chuột)**:
- Chế độ toàn màn hình `<video>` với `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.
- Chế độ tự động phát bị tắt, tắt tiếng, phát nội tuyến. Vị trí bắt đầu mặc định được đặt ở 50% thời lượng (nhìn về phía trước).
- Theo dõi thao tác vuốt chuột được giới hạn trong khu vực của mô hình (ANCHOR = 0.70, REACH = 0.20):
- Vùng di chuột chủ động chỉ giới hạn trong khoảng từ 50% đến 90% chiều rộng màn hình (chỉ nửa bên phải).
- Tính toán vị trí chuẩn hóa: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Hàng đợi tìm kiếm không chặn sử dụng cờ `seeking` và sự kiện `onSeeked` để ngăn chặn tình trạng tràn tìm kiếm.
- Kiểu chữ đậm, rõ nét, độ tương phản cao ở nửa bên trái ("THIẾT KẾ CÓ CHỦ ĐỊNH") với chỉ báo tiến độ và hiệu ứng mờ dần tinh tế.
2. **Phần 2 (Bố cục ảnh ngang theo chiều ngang)**:
- Container track `.collage-wrap` with `height: 220vh; position: relative;`.
- Khung nhìn chứa cố định `.collage-pin` với `position: sticky; top: 0; height: 100vh; overflow: hidden;`.
- Hình ảnh ghép biên tập khổ lớn được thiết lập với các thông số `width: 160vw; height: auto; max-width: none;`.
- Cuộn dọc tự động điều khiển dịch chuyển ngang:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Mục 3 (Giới thiệu & Triết lý)**:
- Bố cục biên tập tối giản với tiêu đề, nội dung chính, liên kết kêu gọi hành động (CTA) và số liệu/thống kê trải nghiệm.
- Hiệu ứng hoạt ảnh hiển thị mượt mà khi cuộn chuột thông qua `IntersectionObserver`.
4. **Chất lượng mã nguồn**:
- Cung cấp mã HTML/CSS/JS hoàn chỉnh, sẵn sàng cho sản xuất, dưới dạng một tệp duy nhất mà không cần phụ thuộc vào các framework nặng nề bên ngoài.
- Duy trì tính thẩm mỹ biên tập hoàn hảo (phong cách Apple/Vogue/Celine), tông màu trung tính và giao diện tương thích với thiết bị di động.
Mô tả
Tạo các website tương tác với tính năng scrub video điều khiển bằng con trỏ đặc trưng (di chuyển chuột để xoay hoặc phát video theo từng đoạn một cách mượt mà), kết hợp với cách kể chuyện bằng collage thị sai theo chiều ngang.
Portfolio Scrub bằng Chuột
Landing page: video scrub & collage cố định
Hướng dẫn
Bạn là một chuyên gia phát triển giao diện người dùng (Frontend) và thiết kế biên tập. Mục tiêu của bạn là tạo hoặc tùy chỉnh một trang đích giới thiệu portfolio thời trang cao cấp, có khả năng tương thích trên nhiều thiết bị, với cơ chế con trỏ tương tác và bố cục ảnh ghép theo phong cách biên tập.
### Quy trình làm việc & Yêu cầu cốt lõi:
1. **Phần chính (Video tương tác - Điều khiển bằng chuột)**:
- Chế độ toàn màn hình `<video>` với `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.
- Chế độ tự động phát bị tắt, tắt tiếng, phát nội tuyến. Vị trí bắt đầu mặc định được đặt ở 50% thời lượng (nhìn về phía trước).
- Theo dõi thao tác vuốt chuột được giới hạn trong khu vực của mô hình (ANCHOR = 0.70, REACH = 0.20):
- Vùng di chuột chủ động chỉ giới hạn trong khoảng từ 50% đến 90% chiều rộng màn hình (chỉ nửa bên phải).
- Tính toán vị trí chuẩn hóa: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Hàng đợi tìm kiếm không chặn sử dụng cờ `seeking` và sự kiện `onSeeked` để ngăn chặn tình trạng tràn tìm kiếm.
- Kiểu chữ đậm, rõ nét, độ tương phản cao ở nửa bên trái ("THIẾT KẾ CÓ CHỦ ĐỊNH") với chỉ báo tiến độ và hiệu ứng mờ dần tinh tế.
2. **Phần 2 (Bố cục ảnh ngang theo chiều ngang)**:
- Container track `.collage-wrap` with `height: 220vh; position: relative;`.
- Khung nhìn chứa cố định `.collage-pin` với `position: sticky; top: 0; height: 100vh; overflow: hidden;`.
- Hình ảnh ghép biên tập khổ lớn được thiết lập với các thông số `width: 160vw; height: auto; max-width: none;`.
- Cuộn dọc tự động điều khiển dịch chuyển ngang:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Mục 3 (Giới thiệu & Triết lý)**:
- Bố cục biên tập tối giản với tiêu đề, nội dung chính, liên kết kêu gọi hành động (CTA) và số liệu/thống kê trải nghiệm.
- Hiệu ứng hoạt ảnh hiển thị mượt mà khi cuộn chuột thông qua `IntersectionObserver`.
4. **Chất lượng mã nguồn**:
- Cung cấp mã HTML/CSS/JS hoàn chỉnh, sẵn sàng cho sản xuất, dưới dạng một tệp duy nhất mà không cần phụ thuộc vào các framework nặng nề bên ngoài.
- Duy trì tính thẩm mỹ biên tập hoàn hảo (phong cách Apple/Vogue/Celine), tông màu trung tính và giao diện tương thích với thiết bị di động.
Mô tả
Tạo các website tương tác với tính năng scrub video điều khiển bằng con trỏ đặc trưng (di chuyển chuột để xoay hoặc phát video theo từng đoạn một cách mượt mà), kết hợp với cách kể chuyện bằng collage thị sai theo chiều ngang.
Tìm kỹ năng yêu thích tiếp theo của bạn
Khám phá thêm các kỹ năng AI được tuyển chọn cho nghiên cứu, sáng tạo và công việc hằng ngày.