-
안녕하세요
-
Google Web Designer의 개발자
Nivesh입니다
-
이 동영상에서는
시차 구성요소를 사용하여
-
시차 애니메이션을 만드는 방법을
-
간략히 설명하겠습니다
-
페이지를 위아래로 스크롤하면
-
전경 및 배경 이미지가
-
서로 다른 속도로 움직이며
깊이 착시 효과를 일으킵니다
-
시차 구성요소는 광고 게시자의
사이트에 의존하여
-
페이지 스크롤 이벤트를
광고로 전달합니다
-
시차 구성요소는
스크롤 이벤트에 대한 응답으로
-
이미지에 애니메이션을 적용합니다
-
시차 애니메이션의 예를
몇 가지 더 찾아보려면
-
'파일'의
'템플릿에서 새로 만들기'에 있는
-
Parallax for Display & Video 360
카테고리로 이동합니다
-
여기서 시차가 브라우저에서
어떻게 표시되는지 확인할 수 있습니다
-
페이지를 스크롤하면
-
이미지가 수직 및 수평으로
움직이는 것을 확인할 수 있습니다
-
이제 직접 시차 애니메이션을
만들어 볼까요
-
'파일'의 '새로 만들기'로 이동합니다
-
시차 구성요소를 사용하려면 환경이
Display & Video 360이어야 합니다
-
프로젝트에 시차 구성요소를 추가하려면
-
구성요소 패널을 열고
-
상호작용 폴더에서 시차 구성요소를
-
스테이지로 드래그합니다
-
시차 구성요소를 구성하려면
-
속성 패널로 이동하여
-
이미지 컨트롤을 클릭하거나
-
구성요소를 직접 더블클릭하면 됩니다
-
먼저 시차 애니메이션에
이미지를 추가합니다
-
이미지를 추가하려면
-
파일 시스템의 파일을
-
스테이지 또는 레이어 패널로
드래그하거나
-
레이어 패널의 더하기 버튼을 클릭하고
-
파일 시스템의 이미지를 추가하면 됩니다
-
레이어를 재정렬하려면
-
레이어 패널에서 레이어를
드래그 앤 드롭하면 됩니다
-
레이어는 순서에 따라
앞에서부터 표시되므로
-
맨 위의 레이어가
다른 레이어보다 앞에 표시됩니다
-
또한 썸네일 영역을 클릭하여
-
이미지를 표시하거나 숨길 수 있으며
-
눈 모양 아이콘을 클릭하여
-
모든 이미지를 표시하거나
숨길 수도 있습니다
-
레이어를 숨기면 다른 레이어에서
작업하기가 더 쉬워집니다
-
예를 들어 모든 레이어를 숨긴 뒤
-
제품, 텍스트, 큰 잎사귀만
표시해 보겠습니다
-
설정 대화상자에는
-
시작, 종료, 미리보기 탭이 있습니다
-
시차 애니메이션을 구성하려면
-
애니메이션의 시작과 끝에서
-
각 레이어가 표시되어야 하는
위치를 지정합니다
-
시작 위치는 웹 페이지에서 구성요소가
-
처음 표시될 때의 위치이며
-
종료 위치는
-
구성요소가 표시 영역을
막 지나갈 때의 위치입니다
-
이제 시작 위치를 구성해 보겠습니다
-
큰 잎사귀는 다시 숨기고
-
마우스로 제품을 가운데로 옮겨보겠습니다
-
이동 시에는 화살표 키를 사용해도 되며
-
Shift 키를 누른 상태로
화살표 키를 사용하면
-
한 번에 10픽셀씩 이동할 수 있습니다
-
또는 레이어 속성 패널에서
위치를 직접 입력할 수도 있습니다
-
시작 위치의 값을
종료 위치에 빠르게 복사하려면
-
여기의 위치 일치 버튼을
클릭하면 됩니다
-
시작 및 종료 위치의 큰 잎사귀 위치를
다시 지정해 볼까요
-
Shift 키를 누른 상태에서
마우스를 드래그하면
-
움직임을 제한할 수 있습니다
-
종료 위치에서 이 잎사귀를
멀리 옮겨보겠습니다
-
고급 속성에서
고스트 표시 옵션을 켜면
-
현재 수정하고 있지 않은 다른 탭이
-
반투명 이미지로 표시됩니다
-
고스트는 참조용이므로
-
미리보기나 게시된 파일에는
표시되지 않습니다
-
이제 미리보기를 해볼까요
-
샘플 휴대기기에서 위아래로 스크롤하면
-
표시되는 레이어가 어떻게 동작하는지
확인할 수 있습니다
-
시작 또는 종료 탭을 클릭하면
파일을 이어서 수정할 수 있습니다
-
여기서는 이징 옵션을
'이즈 인 아웃'으로 변경하고
-
텍스트를 0.3에서 1로
페이드 인한 다음
-
다시 미리보기를 해보겠습니다
-
레이어의 너비와 높이도
설정할 수 있습니다
-
잎사귀의 너비를
250픽셀로 변경해 볼까요
-
가로세로 비율이 잠겨 있기 때문에
-
높이가 자동으로 업데이트됩니다
-
레이어는 시작 및 종료 위치에서
-
지정된 크기 그대로 유지됩니다
-
즉, 크기에는 애니메이션이
적용되지 않습니다
-
구성요소의 위치 지정을 완료하고
-
저장을 클릭하면
-
일반 Google Web Designer
인터페이스로 돌아오게 됩니다
-
빠르게 진행하기 위해 템플릿 파일로
다시 이동하겠습니다
-
이 파일에는 모든 애니메이션이
이미 설정되어 있습니다
-
이제 속성 패널로 이동하여
-
스크롤 요소 섹션으로 이동합니다
-
이 스크롤 요소 속성은
-
Google Web Designer
스테이지에만 표시됩니다
-
이 값을 업데이트하여
스크롤 요소에 따라
-
광고가 어떻게 표시되는지
확인할 수 있습니다
-
브라우저에서도 광고를
미리 볼 수 있습니다
-
브라우저에서 미리 보는 경우
미리보기 페이지에서는
-
구성요소를 위아래로
스크롤할 수 있을 정도의
-
콘텐츠가 포함된 웹페이지에서
-
광고가 어떻게 표시되는지
에뮬레이션합니다
-
전체 광고의 컨텍스트에서
시차 애니메이션이 어떻게 표시되는지
-
CTA 버튼을 사용하는 경우 또는
이탈 작업 등을 포함하여
-
확인할 수 있습니다
-
시청해 주셔서 감사합니다
