Web-Slinger.css : Wow.js와 마찬가지로 CSS-Y 스크롤 애니메이션

이 기사는 스크롤 애니메이션, 특히 "스크롤 트리거링"에 중점을 둔 스크롤 애니메이션을 탐구합니다. 사용자가 특정 지점을 지나면 애니메이션이 활성화되는 기술입니다. 현재 기본 CSS 지원이 부족하지만 영리한 CSS 기술을 사용 하여이 효과를 달성 할 수 있으며 Wow.js와 같은 JavaScript 라이브러리에 대한 CSS 전용 대안을 생성 할 수 있습니다. 이 접근법은 속성, 사용자 정의 속성 및 스타일 쿼리를 사용합니다. 기존 스크롤 애니메이션 솔루션은 Wow.js에서 볼 수있는 원하는 "일대일"동작과 달리 위쪽으로 스크롤 할 때 종종 애니메이션을 역전시킵니다. 이 제한은 Wow.js 기능을 모방하는 순수한 CSS 라이브러리 인 "Web-Slinger.css"의 생성에 영감을주었습니다. Web-Slinger.css : CSS 전용 스크롤 애니메이션 라이브러리 web-slinger.css는 및

와 같은 클래스를 사용하여 사용자 정의 속성 ()을 사용하여 애니메이션을 관리합니다. 이 접근법은 애니메이션 요소에서 애니메이션 트리거를 해체하여 유연성을 제공합니다. 간단한 예제는

를 사용하여 animate.css의 "플립 핀"애니메이션을 트리거합니다. 데모의 "Cownter"와 같은 더 복잡한 예는 단일 스크롤 포인트에서 여러 애니메이션을 트리거하는 것을 보여줍니다. Cownter의 마크 업은 간단합니다 animation-timeline 및 CSS는 동적 컨텐츠 업데이트를위한 스타일 쿼리를 활용합니다.

데모는 Web-Slinger.css를 외부 리소스로 사용합니다 Web-Slinger.css 구현 세부 사항

핵심 개념은

를 애니메이션 타임 라인으로 사용하여 영구적으로 고정 된 요소를 생성하는 것입니다. 스타일 쿼리 및 사용자 정의 속성을 한 다음이 고정 요소의 가시성을 기반으로 다른 애니메이션을 제어합니다. 이 기술은 고정 요소를 트리거로 사용하는 대신 사용자가 가시 가능한 요소를 직접 애니메이션하는 것을 피합니다. 명명 된 View Progress Timelines (

) 고정 요소를 애니메이션 할 요소에 연결합니다.

view css code .scroll-trigger-n .on-scroll-trigger-n --scroll-trigger-n

제한 및 향후 개선 web-slinger.css는 기능적이지만 더 많은 트리거가있는 더 큰 CSS 파일을 생성합니다. 번호가 매겨진 클래스 이름에는 의미 론적 명확성이 부족합니다. 이상적으로, 기본 브라우저 지원은 가상 속성과 유사한 ID를 사용하여 트리거 및 대상을 연결할 수 있습니다. 스크롤 트리거 애니메이션의 미래는 기본 브라우저 지원에 있습니다. Web-Slinger.css와 유사한 선언적 접근법은 표준화를 위해 채택 될 수 있습니다.

위 내용은 Web-Slinger.css : Wow.js와 마찬가지로 CSS-Y 스크롤 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!