개발 공부/Javascript

카드 스크롤 애니메이션 1 - (카드 슬라이딩 + 플립)

차정 2023. 1. 20. 02:15

[원본 강의]

https://youtu.be/337HnOk13zc

 

 

 

[참고]

https://blogpack.tistory.com/706

clientHeight 는 요소의 내부 높이입니다. 패딩 값은 포함되며, 스크롤바, 테두리, 마진은 제외됩니다.
offsetHeight 는 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함됩니다. 마진은 제외됩니다.
scrollHeight  는 요소에 들어있는 컨텐츠의 전체 높이입니다. 패딩과 테두리가 포함됩니다. 마진은 제외됩니다.

 

 

https://deeplify.dev/front-end/markup/position-sticky

sitcky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 합니다.

 

 

 

 

클래스가 아직은 어려워서 함수형으로 연습해보았다.

 

 

See the Pen Untitled by JEONG (@cona) on CodePen.