이 모션 디자인 튜토리얼에서는 비디오, CSS, JavaScript, GSAP, SVG, Lottie 등을 사용하여 웹 디자인 프로젝트에 모션을 포함하는 방법을 배웁니다. 이 과정은 웹사이트에 생기를 불어넣는 데 도움이 될 것입니다.

00:03:55 웹용 모션 디자인의 기초

00: 16:22 웹 페이지에 비디오 추가하기

00:21:41 연습 #1: 비디오를 사용한 제품 기능

00:29:58 연습 #2: 비디오 배경이 있는 히어로 섹션

00:33:52 웹 성능을 위한 비디오 최적화

00:41: 55 CSS 전환 소개

00:43:18 연습 #3: 웹사이트 헤더

00:50:50 CSS 전환으로 모션 추가

00:54:55 연습 #4: 간단한 드롭다운 메뉴

01:05:04 연습 #5: 이미지 갤러리

01 :19:52 연습 #6: 멋진 아코디언

01:32:04 CSS 애니메이션 소개

01:35:40 연습 #7: 간단한 로딩 화면

01:40:36 CSS 애니메이션과 CSS 전환

01:44:20 로딩 애니메이션 탐색

01:51:18 연습 #8: 사이트 프리로더

02:02:51 연습 #9: SVG 텍스트 로더

02:17:27 연습 #10: 애니메이션 로딩 점이 있는 버튼

02:28:05 일러스트레이션 및 아이콘 애니메이션

02:31: 42 연습 #11: 애니메이션 Lottie 아이콘

02:37:14 연습 #12: 애니메이션 메뉴 아이콘

02:46:01 연습 #13: 애니메이션 일러스트레이션

03:09:14 연습 #14: 애니메이션 아바타

03:19:20 악센트 애니메이션 만들기

03:25:35 연습 #15: 애니메이션 로고

03:40:43 연습 #16: 타자기 효과

03:59:00 대화형 애니메이션으로 놀기

04:05:48 연습 #17: 마우스 따라가기 효과

04:24:05 연습 #18: 스크롤 트리거 애니메이션

04:44:39 시차로 깊이와 차원 추가

04:49:26 연습 #19: 시차 애니메이션

05:07:03

유튜브 https://www.youtube.com/watch?v=vqXLGX0szIQ&t=15204s