[해피CGI][cgimall] Stacking Cards Effect

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 예제 파일을 참고하시면 도움이 될것 같습니다