css-scroll-driven-native
Installation
SKILL.md
Skill: css-scroll-driven-native
Hiệu ứng cuộn trang bằng CSS spec công khai — animation-timeline: scroll() / view() + animation-range — không một dòng JavaScript.
WHAT
Purpose và context
- Purpose: thêm hiệu ứng cuộn (progress bar, reveal-on-view, parallax nhẹ) bằng CSS thuần
animation-timelinelàm progressive enhancement — trình duyệt chưa hỗ trợ hoặc bật reduce-motion vẫn thấy đủ nội dung tĩnh. - Trigger (when to use): user nói "css scroll driven animation", "animation-timeline", "scroll animation không js", "css thuần cuộn trang", "scroll-driven CSS", hoặc /css-scroll-driven-native; hoặc muốn thêm "độ mượt" 0-JS phía trên
scroll-effects. Chọn theo bảng "Khi nào chọn cái này vsscroll-effects" (mục Reference). - Non-goals: không phải cơ chế chính khi cần chạy chắc production đa trình duyệt ngay (đó là
scroll-effects, JS IntersectionObserver); không viết JS; không cứng số phiên bản trình duyệt.
Mental model
timeline (scroll(root) | view()) + animation-range → keyframes; toàn bộ nằm trong @supports → @media not (prefers-reduced-motion: reduce); ngoài hai khối đó = trạng thái tĩnh hiện đủ nội dung.