proto.lib

Scroll-Driven Animations: hoạt ảnh gắn theo tiến trình cuộn bằng CSS

scroll-timeline và view-timeline cho phép animation-timeline gắn tiến trình animation trực tiếp vào vị trí cuộn thay vì nghe sự kiện scroll bằng JS; vì tính toán nằm trên compositor thread nên không bị jank do main thread bận, có progress bar đọc sách và reveal-on-scroll là ví dụ điển hình.

ApplicationTrung bình2026-08-27
Scroll-Driven Animations: hoạt ảnh gắn theo tiến trình cuộn bằng CSS

Tags

#css#scroll-timeline#view-timeline#animation#compositor#performance

Tài liệu tham khảo

Mở rộng

Animation gốc là một file HTML tự chứa, có thể nhúng lại ở bất kỳ trang nào khác. Mở file gốc

Liên quan

ApplicationTrung bình

content-visibility: auto — bỏ qua render ngoài viewport

content-visibility: auto kết hợp contain-intrinsic-size cho phép trình duyệt bỏ qua layout và paint của phần tử ngoài viewport để trang dài render nhanh hơn; cái giá là scrollbar có thể nhảy nếu không khai báo kích thước dự phòng, và nó ảnh hưởng tới tìm-trong-trang (Ctrl+F).

#content-visibility#contain-intrinsic-size#rendering-performance#css
ApplicationTrung bình

Theming bằng CSS Custom Properties: một stylesheet, nhiều theme

Custom properties (biến CSS) khai báo token màu sắc trên :root rồi override lại theo [data-theme] hoặc prefers-color-scheme, tránh phải nhân bản cả stylesheet cho mỗi theme; color-mix() sinh biến thể (hover, disabled) từ một token gốc, còn @property khai báo kiểu dữ liệu cho token để nó có thể animate mượt thay vì nhảy khựng.

#css#custom-properties#theming#dark-mode
ApplicationTrung bình

CSS @layer + Nesting: kiểm soát cascade trong design system

@layer định nghĩa thứ tự lớp rõ ràng cho cascade, nên ai thắng phụ thuộc vị trí layer chứ không phải cuộc đua specificity/!important; CSS nesting cho phép viết selector lồng nhau, giảm lặp mà không đổi nghĩa cascade.

#css#cascade-layers#css-nesting#specificity