Web-Slinger.css : 스위퍼-바닥을 가로 질러

나의 이전 게시물은 틴더에서 수평 스 와이프의 돌이킬 수없는 결과를 강조했다. 나는 또 다른 시간에 그 좌절감을 탐구 할 것입니다. 그러나 언뜻보기에 스 와이프 탐색은 웹 -slinger.css-일방적 인 스크롤 트리거 애니메이션을위한 WOW.JS에 대한 실험적이고 순수한 CSS 대안에 적합합니다. (여전히 테마 곡에서 작업하고 있습니다!) Web-Slinger.css는 CSS 만 사용하여 요소를 좋아하거나 싫어하는 틴더 스타일 스 와이프 상호 작용을 처리 할 수 ​​있습니까? 그리고 더 중요한 것은 대중적인 수요에 따라 스파이더 픽스 이미지를 사용하는 것을 정당화 할 것인가? Spider-Pig Swiper 소개-제안 된 CAPTCHA 교체품 (WHO

가 Spider-Pig를 좋아하지 않기 때문에). 의견을 등록하려면 왼쪽 또는 바로 아래 (크롬/엣지 만)를 스 와이프하십시오.

지평을 확장 Web-Slinger.css는 수평 스크롤을 위해 설계되지 않았습니다. 수정? 간단한 CSS 재정의 :

이것은 클래스를 갖는 요소에 대한 웹 슬링거의 기본 동작을 변경하여 스크롤 트리거가 수직 스크롤이 아닌 수평에 반응하게 만듭니다. 그렇지 않으면, 트리거는 컨테이너 폭으로 인해 시각적으로 숨겨져 있음에도 불구하고 스위퍼의 수직 주름 위에 있기 때문에 즉시 활성화됩니다. 나의 초기 단계에는 Nikolay Talanov의 훌륭한 JavaScript Tinder Swipe Demo를 포킹하고 JavaScript와 하나의 카드를 제거한 다음 Web-Slinger.css를 가져 와서 수평 패치를 적용했습니다. 카드 컨테이너는 3 개의 나란히 뷰포트 크기의 스크롤 스냅 박스와 함께 가되었습니다. 중간 슬라이드는 를 사용하여 중앙에서 사용자를 시작하고 뒤로/전방 스크롤을 허용했습니다. 참고 : 기존의 스크롤 구동 애니메이션을 사용하면 스크롤 가능한 요소가 보이는 것을 스크롤 할 필요가 없습니다. Checkbox Hacks와 같습니다 - 확인란을 숨기고, 레이블을 스타일링하십시오. 기본 UI가 아닌 스크롤 가능한 요소의 CSS 동작을 활용합니다. 세 번째 슬라이드의 div는 거부 애니메이션을 활성화했습니다.

작동했습니다! (내레이터 : 실제로는 그렇지 않았습니다

이를 추가하면 스파이더 픽가 페이지로드에서 자동으로 "좋아요"가 발생했습니다. 보편적으로 숭배하는 사람에게 적합합니다 ... (중년 CSS 해커 인 Ahem). 그러나 Spider-Pig는 보편적으로 사랑받지 못하므로 겉보기에 동일한 원칙에도 불구하고 오른쪽 스윙이 예상과 다르게 행동 한 이유를 살펴 보겠습니다. 뒤로 물러서 이 버그는

의 한계를 강조했습니다. Web-Slinger는

뒤로 트리거 된 애니메이션에 이상적으로 적합하지 않은 기술에 의존합니다. Visualizer는

에 관계없이 요소가 뷰포트를 스크롤 방향으로 떠난 후에 애니메이션이 완료됨을 보여줍니다. 다행히도 Bramus (Chrome Dev Team)는 CSS에서 스크롤 방향을 감지하기위한 데모를 가지고 있습니다. 그의 영리한 커스텀 속성을 사용하여 스타일 쿼리로 animation-range 요소의 모양을 제어 할 수 있습니다.

이것은

가 이전 슬라이드에있을 때만 나타나고 뒤로 스크롤을 통해 도달 할 때만 나타납니다. (3 초, 3 단계 애니메이션으로 제어)는 현재 슬라이드를 계산하여 싫어하는 것을 트리거하기 위해 결정적인 스 와이프가 필요합니다. 마지막 스 와이프 Spider-Pig 의견을 추적하려면 타사 카운터 이미지를 배경으로 사용했습니다. --scroll-direction 교훈을 배운 scroll-trigger-2 이것은 주로 뒤로 스크롤에서만 실행되는 스크롤 트리거 애니메이션을 사용하는 데 어려움이 있기 때문에 예상보다 더 복잡했습니다. 이것은 귀중한 지식입니다. 현재 사양에 숨겨진 힘은 놀랍습니다. 우리는 매우 구체적인 스크롤 행동을 기반으로 스타일을 만들 수 있습니다. 그러나이 힘에 액세스하기 위해 API를 해킹해야했습니다. 이상적인 해결책은 다음과 같습니다

이러한 API를 사용하면 Spider-Pig Swiper는 해킹이 필요하지 않습니다. 나는 스크롤 구동 애니메이션에 대한 더 넓은 브라우저 지원과보다 유연한 사양을 희망하여 디자이너가 자신의 경험에 비선형 스토리 텔링을 구축하도록 장려합니다. 그렇지 않으면 애니메이션 타임 라인이 더 널리 지원되면 Web-Slinger.css를보다 강력하고 제작 준비가되도록해야 할 때가 될 수 있습니다.

위 내용은 Web-Slinger.css : 스위퍼-바닥을 가로 질러의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!