프론트엔드 첫걸음

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

개발 공부/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.

'개발 공부 > Javascript' 카테고리의 다른 글

createDocumentFragment  (0) 2023.02.04
css filter를 사용한 색상 반전 모드  (0) 2023.01.29
클로저  (0) 2022.10.08
화면이 다 안그려져서 이벤트가 안먹을 때  (0) 2022.08.12
클래스와 오브젝트  (0) 2022.08.07
'개발 공부/Javascript' Related Articles more