모션 선호도가있는 CSS 스크롤 타임 라인

핵심 사항을 빠르게 찾아보십시오.

• Mary Lou는 "Alternate Column Scroll"이라는 일반적인 Codrops 스타일 데모를 발표했습니다.
• 스크롤 효과는 기관차 두루마리로 구동되는데, 이는 이전에 우연의 일치로 덮여 있습니다.
• Bramus는 기본 CSS 스크롤 효과를 달성하기 위해 향후 CSS 스크래블 타임 라인 기능의 사용을 탐색 해 왔습니다. 그는 여기에서 시작하여 4 부분으로 구성된 심층 시리즈를 썼습니다.
• 아직 초기 단계이지만 @scroll-timeline 크롬에 표시되었습니다. Bramus는 또한 CSS 트릭 에서이 기능을 강력하게 사용하는 것을 보여줍니다. 특히 Waapi와 함께 사용될 때.
• 따라서 Bramus는 프레젠테이션의 스크롤 측면을 재구성하기 위해 시작했습니다 (중간 열은 자연스럽게 스크롤하고 외부 두 열은 반대로 스크롤합니다). Polyfill을 사용하고 WAAPI를 추가하여 잘 복사 할 수 있습니다. 매우 멋지다.

CSS 스크롤 타임 라인을 사용하여 prefers-reduced-motion 과 함께 사용합니다

내가 추가하고 싶은 유일한 것은 prefers-reduced-motion 속성을 고려해야한다는 것입니다.이 스크롤 애니메이션은 병에 걸리기 쉬운 사람들에게 영향을 줄 수 있기 때문입니다. 이렇게하려면 테스트를 동일한 라인의 JavaScript의 지원 테스트와 결합 할 수 있습니다.

 만약에 (
    ! 
    ! wind
   ) {
     // 쿨 효과 실행}

회의를 테스트하거나 reduce 의 반대를 테스트하는 것이 더 낫지는 않습니다. 어느 쪽이든, CSS의 트릭은 @supports 테스트에서 @scroll-timeline 및 animation-timeline 으로하고 싶은 모든 것을 포장 한 다음 (다른 일을하고 싶다면) 환경 설정 테스트에서 그 테스트를 마무리하는 것입니다.

 @Media (선호-감소 모션 : 예비 회의) {

    @Supports (Animation-Timeline : Works) {

      /* 멋진 효과 실행*/

    }

}

그것은 시연이며, 모든 크레딧은 브라 머스에게이를 수행 한 것입니다.

오, 아세요? @when 이 기능이되면 CSS는 더 간결합니다.

 @When supports (애니메이션-타임 라인 : 작품) 및 미디어 (선호-감소 모션 : 비 예정) {

} @또 다른 {

}

위 내용은 모션 선호도가있는 CSS 스크롤 타임 라인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!