Có một số hoạt ảnh cuộn có thể sử dụng trong CSS mà không cần bất kỳ JavaScript nào. Chỉ cần nhìn vào chương về Chỉ báo cuộn, đây rõ ràng là phép thuật của CSS. Nhưng chúng ta có thể thực hiện rất nhiều hoạt ảnh cuộn trực tiếp trong CSS chỉ với một chút thông tin do JavaScript cung cấp: trang đã cuộn được bao xa.
Vì vậy, chúng ta hãy làm điều đó ra khỏi con đường. Với JavaScript one-liner, chúng ta có thể đặt thuộc tính tùy chỉnh CSS biết phần trăm trang được cuộn:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Bây giờ chúng ta có --scrollmột giá trị mà chúng ta có thể sử dụng trong CSS.
Thủ thuật này do Scott Kellum, người khá là bậc thầy về thủ thuật CSS!
Hãy thiết lập một hoạt ảnh mà không sử dụng giá trị đó lúc đầu. Đây là một hình ảnh động quay đơn giản cho phần tử SVG sẽ quay và quay mãi mãi:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Đây là mẹo! Bây giờ chúng ta hãy tạm dừng hoạt ảnh này. Thay vì tạo hoạt ảnh cho nó trong một khoảng thời gian, chúng tôi sẽ tạo hoạt ảnh cho nó qua vị trí cuộn bằng cách điều chỉnh animation-delaykhi trang cuộn. Nếu animation-durationlà 1s, điều đó có nghĩa là cuộn toàn bộ chiều dài của trang. là một lần lặp lại hoạt ảnh.
svg ( position: fixed; /* make sure it stays put so we can see it! */ animation: rotate 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -1s); ) Hãy thử thay đổi animation-durationthành 0.5s. Điều đó cho phép hai hoạt ảnh có thể được hoàn thành với phép animation-delaytoán.
Scott đã lưu ý trong bản demo ban đầu của mình rằng cũng thiết lập:
animation-iteration-count: 1; animation-fill-mode: both;Được giải thích cho một số điều kỳ lạ "vượt quá" và tôi có thể chứng thực rằng tôi cũng đã thấy nó, đặc biệt là trên các cửa sổ xem ngắn, vì vậy cũng đáng để đặt những điều này.
Scott cũng đặt các thuộc tính hoạt ảnh liên quan đến cuộn trên :root ()chính nó, có nghĩa là nó có thể kiểm soát tất cả các hoạt ảnh trên trang cùng một lúc. Đây là bản demo của anh ấy điều khiển đồng thời ba hoạt ảnh: