인프런 커뮤니티 질문&답변

baby4님의 프로필 이미지
baby4

작성한 질문수

애플 웹사이트 인터랙션 클론!

부드러운 감속 비디오에 적용하기

안녕하세요! 질문있습니다

작성

·

250

0

페이지 전체에 smooth한 scroll을 적용하고 싶은데

해당 강의 보면서 requestAnimationFrame으로 그것이 가능할 수 있을까 생각이 되긴 하는데

어떻게 구현해야 할지 잘 모르겠어서요 ㅜㅜ

물론 기존 강의처럼 calcValues로 애니메이션 구현하는 섹션도 있습니다!

 

이게 아니라면 다른 방법이나 라이브러리를 추천해 주실 수 있으실까요?

( vanila로 된 라이브러리를 하나 찾았으나 기기별로 속도 적용하기가 좀 까다롭거나, 트랙패드와 마우스 휠의 속도차이가 난다거나.. 하던 이슈가 좀 있었어요
물론 제가 잘 사용하지 못해서 그런 것 같습니다 ㅜㅜ )

아! 그리구 네비게이션 클릭시 특정 영역으로 갈 때 속도 조절 하는 방법도 궁금합니다

(예를 들면 jquery animate처럼요)

한번에 많은 질문해서 죄송해요 ㅜㅜ

답변 1

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

페이지 전체에 직접 적용하려면, 말씀대로 requestAnimationFrame을 이용해서 전체 컨테이너의 translateY를 움직이는 방법으로 하시는게 제일 심플합니다. 부드러운 스크롤의 원리를, 전체 컨테이너에 적용하는거지요~

https://www.cssscript.com/10-best-smooth-scroll-javascript-plugins/

저도 라이브러리를 많이 사용해본 것은 아니라서, 이런 곳에서 둘러보시고 원하는 기능에 맞는 것을 고르시면 될 것 같습니다^^

baby4님의 프로필 이미지
baby4
질문자

답변 감사드립니다!

공유해주신 내용 잘 찾아볼게요

baby4님의 프로필 이미지
baby4

작성한 질문수

질문하기