CSS sticky position 및 Intersection Observer API를 사용하여 스태킹 카드 효과를 구현합니다
평가하기
CSS sticky position 및 Intersection Observer API 를 사용하여 스태킹 카드 효과를 구현합니다
내용을 카드인터페이스에 담아 여러장으로 구성하여 접을 수 있습니다
사용방법은 아래와 같습니다
첨부된 압축파일을 해제하여 아래와 같이 css , js 파일을 불러오도록 합니다
HTML,CSS,J 구성은 아래와 같습니다
각 item 별 내용들을 삽입할 수 있습니다
sticky css position 속성값을 사용하여 .stack-cards__item 요소에 적용할 수 있습니다
StackCards 쌓기 효과를 초기화하는데 사용할 객체를 정의 할 수 있습니다
Intersection Observer API가 지원 intersectionObserverSupported === true)되고
모션 감소가 활성화되지 않은 경우 에만 효과가 작동합니다
js-stack-cards요소는 뷰포트 (내부 entries[0].isIntersecting == true의 stackCardsCallback()기능),
윈도우 스크롤 이벤트를 수신하고 각 카드 요소 따라 (의 변환 값 업데이트 animateStackCards()기능) :
animateStackCards()기능 에서는 카드가 고정되어 있는지 (스크롤링> 0) 확인하고 축소합니다.
위와 같은 기본구조를 활용하여 아래와 같이 카드효과를 출력할 수 있습니다
첨부된 파일중 main/index.html 예제 파일을 참고하시면 도움이 될것 같습니다
네티즌 의견이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
