영화 기술 감소, 둘을 가져 가십시오

요소를 와 함께 사용하기위한 깔끔한 기술을 보셨습니까?

우리가 뉴스 레터에서 그것을 공유 한 후, 우리는 Michael Gale로부터 흥미로운 답변을 얻었습니다.

애니메이션 GIF를 좋아하지만 UI가 온통 확대되기를 원하지 않는 사람들은 어떻습니까? 그들은 이제 컨텐츠와 UI 중에서 선택해야합니까?

나는 그것이 꽤 흥미로운 질문이라고 생각했습니다.

또한 MP4는 어떻습니까?! 영토는 비디오가 GIF보다 웹에서 더 나은 방법이라고 제대로 확신했습니다. 일부 브라우저는 요소 내에서 바로 비디오를 지원하고 믿거 나 말거나, 요소에 대해서도 드럼 롤을 사용하여 폴백을 쓸 수 있습니다!

이 모든 것들을 결합하는 데 균열을 겪어 봅시다.

MP4 소스 추가

쉬운 것은 비디오와 함께 추가 를 추가하는 것입니다. 즉, 우리는 세 가지 소스 미디어 파일이 필요하다는 것을 의미합니다.

1. 감소 된 모션을 선호 할 때 폴백 비 애니메이션 그래픽이 줄어 듭니다.
2. 기본값으로 애니메이션 GIF.
3. 폴백이 지원되는 경우 GIF를 대체하는 MP4 비디오.

예를 들어:

 
  <source srcset="static.png" media="(선호-감소 운동 : 감소)"> </source>
  
  <img srcset="animated.gif" alt="animated image">
사진>

Chrome의 기본 조건에서 GIF 만 다운로드하여 표시됩니다.

Safari의 기본 조건에서 MP4 만 다운로드하여 표시됩니다.

Preced-Retuced-Motion : Chrome 또는 Safari에서 감소를 활성화 한 경우 (Mac에서는 시스템 환경 설정 → 접근성 → 디스플레이 → 모션 감소 )로 이동하면 두 브라우저 모두 정적 PNG 파일 만 다운로드합니다.

Firefox를 테스트했는데 작동하지 않는 것 같습니다. 대신 GIF 버전을 계속 다운로드했습니다. Firefox는 선호하는 감소 모션을 지원하는 것처럼 보이지만 아마도 요소에서는 아직 지원되지 않았을까요? 나는 거기에 무엇이 있는지 잘 모르겠습니다.

단일 애니메이션 소스를 제공하고 도구가 다른 소스를 생성하는 것이 멋지지 않습니까? 나는 당신이 Cloudinary와 같은 것과 연결될 수 있다고 확신합니다.

토글을 추가하여 애니메이션 버전을 표시합니다

마이클 게일 (Michael Gale)이 언급했듯이, 모션 토글을 감소 시켰기 때문에 애니메이션 버전을 보는 것이 완전히 잠긴 것 같습니다.

javaScript를 사용하여 미디어 쿼리를 잡아 당기고 브라우저가 애니메이션 버전을 표시하도록하는 을 갖는 것은 쉽습니다.

HTML 에서이 선언적으로 수행 할 수있는 실용적인 방법이 없다고 확신합니다. 또한이 버튼을 태그 내에 넣을 수 없습니다. 는 대체 된 요소가 아니지만 브라우저는 여전히 혼란스러워지고 마음에 들지 않습니다. 대신, 전혀 렌더링하지 않습니다. 큰 문제는 없습니다. 우리는 래퍼를 사용할 수 있습니다.

 <div>
  
  
     
  사진>

   애니메이션 

</div>

이미지 어딘가에 버튼을 배치 할 수 있습니다. 이것은 임의의 선택 일뿐입니다. 원하는 곳에 놓을 수도 있고 사용자에게 설명 할 수 있다고 생각하는 한 전체 이미지를 탭할 수 있습니다. 동일한 미디어 쿼리가 일치 할 때만 버튼 만 표시해야합니다.

 .picture-wrap .animate-button {
  디스플레이 : 없음;
}

@Media (Prefers-Seeduced-Motion : Reduce) {
  .picture-wrap .animate-button {
     디스플레이 : 블록;
  }
}

버튼을 클릭하거나 탭하면 애니메이션 소스를 다운로드하여 애니메이션을 시작하려면 미디어 쿼리를 제거해야합니다.

 let button = document.querySelector ( ". Animate-Button");

button.addeventListener ( "클릭", () => {
  const parent = button.closest ( ". picture-wrap");
  const picture = parent.querySelector ( "그림");
  Picture.QuerySelector ( "Source [Media]"). remove ();
});

실제로는 다음과 같습니다.

아마도 이것은 좋은 구성 요소일까요?

버튼, 버튼 스타일 및 웹 구성 요소의 버튼 기능을 자동으로 포함시킬 수 있습니다. 이봐, 왜 안돼?

위 내용은 영화 기술 감소, 둘을 가져 가십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!