Zoom UI năm 2026: Prezi, impress.js và lý do tôi tạo ra Zumly
Hiện nay có hai cách tiếp cận phổ biến để sử dụng hiệu ứng zoom trong giao diện web, mỗi cái phục vụ mục đích và đánh đổi khác nhau. Tác giả đã xây dựng giải pháp thứ ba mang tên Zumly và phân tích công bằng những điểm mạnh, yếu của từng phương pháp trong bài viết này.
Zoom UI năm 2026: Prezi, impress.js và lý do tôi tạo ra Zumly
Hiện nay, về cơ bản có hai cách tiếp cận đã được thiết lập để sử dụng tính năng zoom trong các giao diện web. Chúng phục vụ các mục đích khác nhau và đưa ra những sự đánh đổi riêng biệt. Tôi đã xây dựng một giải pháp thứ ba, vì vậy tôi sẽ cố gắng phân tích công bằng về những điểm mạnh và hạn chế của từng phương pháp.
Prezi
Prezi là người tiên phong về khung vẽ (canvas) có khả năng zoom cho các bài thuyết trình và vẫn là người dẫn đầu thị trường trong lĩnh vực này. Gần đây, họ đã thêm các công cụ tạo văn bản và tạo nội dung được hỗ trợ bởi AI. Đây là một sản phẩm được hoàn thiện tốt và có lượng người dùng thực tế.
Tuy nhiên, Prezi là một nền tảng khép kín, không phải là một thư viện phần mềm. Bạn không thể sử dụng động cơ zoom của nó trong ứng dụng của riêng mình. Mức giá bắt đầu từ 15 USD/tháng cho các tính năng hữu ích, và việc xuất sang PowerPoint sẽ làm phẳng tất cả các hiệu ứng zoom thành các slide tĩnh. Một lời phàn nàn lặp đi lặp lại của người dùng là các chuyển động zoom và pan gây ra say xe. Về bản chất, Prezi sử dụng zoom như một thiết bị kể chuyện giữa các khung hình được sắp đặt sẵn. Nó không phải là một mô hình điều hướng (navigation model), mà là một mô hình thuyết trình.
impress.js
impress.js đã mang phong cách zoom kiểu Prezi vào web mở. Đây là một khung trình bày (presentation framework) dựa trên các biến đổi và chuyển đổi CSS3, được truyền cảm hứng trực tiếp từ Prezi. Nó thực sự mang tính đột phá khi ra mắt.
Kiến trúc của nó dựa trên các "bước" (step-based): bạn định vị các bước trong không gian 3D và máy ảnh sẽ di chuyển giữa chúng. Điều này rất tuyệt vời cho các bài thuyết trình, nhưng nó không giúp bạn xây dựng một ứng dụng nơi người dùng điều hướng bằng cách zoom vào nội dung. impress.js không có khái niệm về việc gắn kết khung nhìn (mounting views) động, quản lý độ sâu zoom hay xử lý trạng thái điều hướng. Nó thực chất là một động cơ trình chiếu slide với một thủ thuật zoom.
Zumly
Đây là những gì tôi đã xây dựng. Tôi xin tuyên bố rõ rằng tôi là nhà phát triển duy nhất của dự án này.
Ý tưởng là cung cấp một giải pháp thay thế cho việc điều hướng trang truyền thống bằng cách sử dụng zoom. Bạn đánh dấu một phần tử là có thể zoom, chỉ định nó đến một khung nhìn (view), và Zumly sẽ xử lý quá trình chuyển đổi cũng như chèn các khung nhìn mới. Về cơ bản là như vậy.
Tôi bắt đầu Zumly vào năm 2020 sau khi rời bỏ Zircle UI (một thư viện zoom cho Vue), cố gắng đưa những gì đã học được đi xa hơn. Nó độc lập với framework (framework-agnostic), chỉ tập trung vào phần zoom. Kể từ đó, tôi đã viết lại động cơ vài lần, thay đổi cách tiếp cận hơn một lần. Chỉ đến bây giờ tôi thực sự hài lòng với cảm giác mà nó mang lại.
Các khung nhìn được gắn kết và gỡ bỏ (mount/unmount) động trong quá trình chuyển đổi zoom. Trong impress.js, tất cả các bước cùng tồn tại trong DOM. Trong Zumly, bạn zoom vào một phần tử kích hoạt, và khung nhìn đích sẽ được tiêm vào và thu phóng vào vị trí. Điều này gần gũi hơn với cách hoạt động của định tuyến (routing) trong các Ứng dụng Trang Đơn (SPA) hơn là cách các bộ slide hoạt động.
Trang đích (landing page) được xây dựng bằng chính Zumly để bạn có thể cảm nhận được nó trước khi chạm vào bất kỳ dòng code nào.
Tôi tò mò không biết liệu có ai khác đã nghĩ về không gian này chưa. Điều gì làm cho các giao diện zoom hoạt động hiệu quả hoặc thất bại?
Trang đích (được xây dựng bằng Zumly): https://zumerlab.github.io/zumly
