web animation api를 통한 apple page
489
작성한 질문수 12
안녕하세요
강의를 들으면서 궁금한 사항이 생겨서 질문드립니다!
1분 코딩님께서 제작하신 강의중에 apple페이지를 클론 코딩하는 강의가 있는데
web animation API를 통해서는 똑같이 만들수없을까요??
그리고 web animation API를 통해서 canvas를 조작할수는 없을까요?
답변 2
0
Web Animation API는 기본적으로 CSS의 애니메이션 속성들을 컨트롤하는 것이라서, 애플 웹사이트의 효과를 모두 흉내내기는 어렵습니다. 스크롤에 따른 오브젝트의 사이즈 변경이나 회전, 투명도 변화 같은 Transform에 관련된 동작은 컨트롤이 가능한데요, 스크롤에 따라 재생되는 이미지 시퀀스라든지(애플 수업에서 컵이 돌아가는 동작 등) 캔버스 조작은 흉내내기가 어렵습니다. 캔버스 내부의 개별 그래픽 요소를 애니메이션 처리하려면 캔버스 API를 직접 조작해야 한답니다.
0
안녕하세요, 인프런 AI 인턴이에요.
웹 애니메이션 API를 사용하여 Apple 페이지를 클론 코딩하는 것은 가능합니다. 웹 애니메이션 API는 다양한 요소들을 애니메이션화하는 기능을 제공하기 때문에, Apple 페이지의 애니메이션 효과들을 구현할 수 있을 것입니다. 웹 애니메이션 API를 사용하는 방법은 해당 API의 문서를 참고하시면 도움이 될 것입니다.
또한, 웹 애니메이션 API를 통해 canvas를 조작하는 것도 가능합니다. canvas는 그래픽을 그리기 위한 요소로 사용되며, 웹 애니메이션 API를 사용하면 canvas 내의 그래픽들을 애니메이션화시킬 수 있습니다. 이를 통해 다양한 인터랙티브한 웹 애플리케이션을 개발할 수 있습니다.
하지만, Apple 페이지를 완벽하게 클론 코딩하거나 canvas를 조작하는 것은 어려울 수 있으며, 웹 애니메이션 API의 사용에는 일정한 학습이 필요할 수 있습니다. 따라서, 특정 기능을 구현하기 위해 웹 애니메이션 API를 사용하고자 한다면, 해당 API의 문서와 예제들을 참고하며 학습을 진행하시면 좋을 것 같아요.
더 자세한 내용이나 코드 예시가 필요하시다면, 구체적인 내용을 알려주세요. 도움을 드릴 수 있도록 최대한 노력하겠습니다. 수고하세요!
배리어블 목록 없음
0
7
2
Token 등록 방법 문의
0
9
1
3강 질문
0
9
1
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
18
1
스크롤 이미지 영역 넘어갈시 가로로 스크롤이 안되여
0
133
1
vscode에서 svg파일 불러오기 질문
0
3760
1
모바일 화면 최적화 방법 질문드립니다!
0
228
1
key.svg 이미지
1
209
1
Vue.js 적용 방법
0
278
1
강사님 vscode 폰트와 색상이 뭔가요
0
648
2
2:20분 이해가 가지 않습니다.
0
284
1
리액트에서 scroll-timeline.js 불러오는 법
0
726
1
특정 시점에 자바스크립트 호출은 어려울까요?
0
320
2
section04 - 각각의 객체에 개별 애니메이션 적용하기
0
461
3
scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?
0
736
2
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





