Trình tạo CSS View
Transition
Thiết kế, tinh chỉnh và mô phỏng hiệu ứng chuyển cảnh "View Transition API"
ngay trên trình duyệt một cách trực quan nhất.
Chọn mẫu
Xem trước
Cài đặt
※ Điểm kết thúc (To) của ::view-transition-old (trạng thái đang thoát đi)
※ Điểm bắt đầu (From) của ::view-transition-new (trạng thái chuẩn bị xuất hiện)
Mã Tạo Ra
Bạn cũng có thể thích
Giới thiệu chung
Trình Tạo CSS View Transition là một công cụ web thân thiện với lập trình viên, cho phép bạn thiết kế, tùy biến và xem trước bằng mắt thường các hiệu ứng chuyển trang từ công nghệ 'View Transition API' cực mượt ngay trên màn hình mà không cần tốn sức code thủ công.
Trước kia, để một trang web (đặc biệt là SPA) có những màn lật trang siêu mượt, bạn sẽ phải nhờ tới các thư viện JS đồ sộ để làm Animation. Nhưng giờ thì không cần nữa, bằng API thần thánh của trình duyệt kết hợp với sức mạnh của CSS, tất cả đều trong tầm tay. Công cụ này cho phép bạn can thiệp vào các thông số (độ mờ, to nhỏ, xoay trái phải) cho các khung ảnh trước và sau khi trang biến đổi, sau đó tạo giúp bạn luôn mã CSS và HTML tương ứng để bỏ vào dự án MPA / SPA.
Thêm một điểm nữa, dù công cụ có mạnh mẽ thế nào thì tất cả mọi thứ đều được xử lý cục bộ trên thiết bị của bạn. Sẽ không có bất kỳ dòng code, hay lịch sử thao tác nào bị lưu trữ lên hệ thống của chúng tôi.
Cách Tạo Hiệu ứng chuyển trang
Bắt đầu bằng một Mẫu thiết kế
Ngay bên trên có các nút Mẫu có sẵn (như Trượt Trái, Làm mờ, Thu phóng). Nhấn vào cái mà bạn muốn, sau đó đặt tên cho "view-transition-name" để làm móc nối danh tính cho các thẻ phần tử.
Xem trước và Tinh chỉnh
Hãy nhấn nút "Phát / Đổi trạng thái" để xem sự mượt mà của hiệu ứng. Sau đó rảo qua các Tab "Hiệu ứng Cũ" (thẻ đi ra khỏi màn hình) và "Hiệu ứng Mới" (thẻ hiện lên) để làm cho hoạt ảnh mang đậm dấu ấn cá nhân.
Copy mã mang về nhà
Phía dưới khu vực Cài đặt là ba tab Mã tạo sẵn: CSS, JavaScript (Dành cho những trang xài React/Vue), và HTML (Cho những trang Web kiểu cũ đổi toàn trang). Chọn đoạn bạn cần và nhấn Copy là xong.
Từ Điển View Transition
- View Transition API
- Cơ chế cực hay của trình duyệt, nó tự động "chụp lại" một bức ảnh màn hình DOM cũ lúc bạn nhấn chuyển trang, rồi hòa trộn làm sao đó ra cái khung của trang mới. Điều này giúp loại bỏ cảm giác màn hình nháy trắng một phát mỗi khi tải lại trang.
- view-transition-name
- Thuộc tính CSS này y hệt cái biển tên dán trên áo đi thi. Trình duyệt nhìn vào trang cũ thấy thằng A, ngó sang trang mới cũng thấy thằng A, thế là nó sẽ vẽ một đường di chuyển mượt mà liên kết thằng A cũ và thằng A mới lại với nhau. Do đó, các thẻ trong cùng 1 trang không được phép mang trùng tên này, nếu không máy sẽ lú ngay.
- ::view-transition-old / new
- `old` là pseudo-element giả đại diện cho "trạng thái vừa qua", quyết định cách mà một khối biến mất (fade out). `new` thì là thằng "trạng thái đang tới", kiểm soát việc thẻ đi vào màn hình. Việc của chúng ta là mắm muối cho nó mấy hiệu ứng Animation đẹp vào đây.
- Cross-document View Transitions
- Mặc định tính năng này xài ngon cho Single Page Application (ví dụ viết bằng Next.js, Nuxt...). Gần đây Chrome mở đường cho cả ứng dụng Đa trang (Multi-page) cũng dùng được, giúp cho các trang HTML cổ điển từ xưa giờ có thể sang trang đẹp không kém cạnh gì mấy App Native, chỉ với một cái thẻ meta bé xíu trong head.
Hỏi Đáp Thường Gặp
- Q.Dữ liệu của tôi có bị gửi đi không?
- Không, công cụ này hoạt động hoàn toàn bên trong trình duyệt của bạn. Bất kỳ thông số nào bạn nhập cũng không bao giờ bị gửi tới máy chủ khác. Nó hoạt động an toàn ngay cả khi bạn offline.
- Q.Hiệu ứng View Transition có chạy trên mọi trình duyệt không?
- Nó hiện được hỗ trợ trên Chrome 111+, Edge 111+, Safari 18+... Đối với các trình duyệt cũ như Firefox, nó sẽ chỉ chuyển trang tức thì như bình thường (progressive enhancement) chứ không làm hỏng trang web của bạn.
- Q.Tôi có thể sử dụng cho các trang web thông thường (MPA) không?
- Có thể, với các liên kết chuyển qua lại giữa các trang trong cùng một tên miền (same-origin). Chỉ cần thêm thẻ `<meta name="view-transition" content="same-origin" />` vào trong thẻ `<head>` và đặt `view-transition-name` giống nhau qua CSS, bạn có thể tạo hiệu ứng chuyển trang mà không cần code JavaScript.
- Q.Tôi nên điền gì vào mục view-transition-name?
- Bất kỳ chuỗi văn bản nào, miễn là nó độc nhất (duy nhất) trên toàn bộ trang hiện tại (ví dụ: `main-content`, `hero-image`, `card-123`). Nếu có nhiều thẻ cùng mang chung một tên thì quá trình chuyển cảnh sẽ bị lỗi. Đối với danh sách, nên gắn id độc nhất vào tên.
Ứng dụng thực tế
Bạn có thể dễ dàng bắt gặp những hiệu ứng này trong các ứng dụng đẳng cấp thế giới.
Trang chi tiết của web Thương Mại Điện Tử
Khi người dùng nhấn vào ảnh thu nhỏ của sản phẩm ở trang liệt kê, hình ảnh ấy sẽ không biến mất mà trượt và phình to lên rồi thả gọn vào vị trí ảnh to trong trang chi tiết. Trải nghiệm hút mắt này chắc chắn giữ chân khách hàng hiệu quả.
Đóng giả làm App di động Native
Khi thiết kế Web-app (ví dụ PWA) cho giao diện điện thoại thông minh, những pha chuyển trang như vuốt vào thì trượt khung trái sang phải cực kì phù hợp. Người dùng không tin đây là một trang web.
Chuyển đổi Dark mode
Thay vì đổi xoạch một phát màn hình từ trắng sang đen thui chói lòa, với View Transition, bạn có thể tạo hoạt ảnh như vòng tròn màu đen khổng lồ lan rộng ra từ ngón tay người dùng chạm tới tận rìa màn hình.
Lọc danh sách hoặc Sắp xếp
Khi nhấn Lọc để xem các mặt hàng, mấy món bị lọc bỏ sẽ mờ dần ra khỏi màn hình, còn những món đúng điều kiện thay vì nhảy loạn lên sẽ lướt nhịp nhàng lấp vào mấy chỗ trống kia. Cực mướt.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.