inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

웹 애니메이션의 새로운 표준, Web Animations API

스크롤 애니메이션이 적용된 랜딩페이지 1

scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?

736

박은희

작성한 질문수 2

0

안녕하세요. 강의 잘 듣고 있습니다.

scroll-timeline.js 를 사용한 ScrollTimeline 실행 시,

부드러운 모션 효과를 위한 옵션이 있을까요?

스크롤 한번 했을 때. 스르륵 멈출 수 있게요.

HTML/CSS javascript 인터랙티브-웹 frontend web-animations-api

답변 2

0

1분코딩

아 네, 아직까지 스크롤 타임라인의 경우는 smooth scroll을 제공하지는 않는 걸로 알고 있습니다. 개발중인 스펙이기 때문에 추후에 추가될 가능성이 없지는 않을 것 같아요!

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요. scroll-timeline.js를 사용한 ScrollTimeline 실행 시, 부드러운 모션 효과를 위한 옵션은 Easing 함수를 사용하는 것이 일반적입니다. Easing 함수는 프로그램적으로 값을 조절하여 원하는 모션을 만들 수 있도록 도와줍니다. scroll-timeline.js에서는 easing 옵션을 사용하여 모션을 제어할 수 있으며, 대표적인 easing 함수로는 “linear”, “ease-in”, “ease-out”, “ease-in-out” 등이 있습니다.

예를 들어, “ease-in-out”의 경우 스크롤을 처음에는 천천히 가속하다가 점점 빠르게 이동한 후, 스크롤을 멈출 때에도 천천히 감속하는 모션을 만들 수 있습니다.

scroll-timeline.js를 사용할 때, easing 옵션을 사용하여 적절한 easing 함수를 선택하고 필요한 경우 파라미터를 조정하여 원하는 부드러운 모션 효과를 만들어 볼 수 있을 것입니다.

더 자세한 내용은 scroll-timeline.js의 공식 문서를 참고하시면 도움이 될 것입니다. 감사합니다.

74. 데이터 캐시 - 1 (이론) 강의 영상 누락

0

14

1

2강 nodejs 3단계 설명 질문

0

25

1

6-6 실습 문의

0

20

2

imagesLoaded에 관한 질문

0

17

2

스크롤 이미지 영역 넘어갈시 가로로 스크롤이 안되여

0

133

1

vscode에서 svg파일 불러오기 질문

0

3758

1

모바일 화면 최적화 방법 질문드립니다!

0

228

1

key.svg 이미지

1

209

1

Vue.js 적용 방법

0

278

1

강사님 vscode 폰트와 색상이 뭔가요

0

648

2

2:20분 이해가 가지 않습니다.

0

284

1

web animation api를 통한 apple page

0

489

2

리액트에서 scroll-timeline.js 불러오는 법

0

726

1

특정 시점에 자바스크립트 호출은 어려울까요?

0

320

2

section04 - 각각의 객체에 개별 애니메이션 적용하기

0

461

3

scroll-timeline.js 파일

0

544

1

선생님 Section4에 제목 오타난것같습니다!

0

389

1

keyframeEffect를 찾을 수 없다고 나와요

0

504

1

제이쿼리 animate()와는 다른걸까요?

0

402

1

scroll-timeline.js 파일을 cdn으로 불러 올 수 없을까요??

0

559

1

넓이를 %로 적용하긴 어려울까요?

0

434

2

scrollTimeline polyfill 에 관해서

0

812

1

아직 강의를 보진 않았는데

2

575

1

이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?

0

1151

2