구성요소 API

360° 갤러리

gwd-360gallery

회전하는 개체를 표시하는 갤러리 개체입니다.

속성

이름	설명
images:string	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
autoplay:boolean	갤러리 로드 후 갤러리가 자동으로 재생되어 갤러리의 이미지를 차례로 표시해야 합니다.
wrap:boolean	끝에서 중단되는 대신, 사용자가 첫 번째에서 마지막 프레임까지 갤러리를 스와이프할 수 있어야 합니다.

이벤트

이름	설명
firstinteraction	사용자가 처음으로 갤러리와 상호작용할 때 전송됩니다.
allframesviewed	갤러리의 모든 프레임이 한 번 이상 표시되었을 때 전송됩니다.
allframesloaded	갤러리의 모든 프레임이 로드되었을 때 전송됩니다.
frameshown	새 프레임이 표시되었을 때 전송됩니다.
frameactivated	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
frametap	사용자가 프레임을 탭할 때 전송됩니다.

메서드

이름	설명
goToFrame(frame:number, opt_animate:string, opt_direction:string)	지정한 프레임에 애니메이션이 적용됩니다.
rotateOnce(opt_duration:number, opt_direction:string)	갤러리의 객체를 한 번 회전합니다.
goForwards()	갤러리를 한 프레임 앞으로 이동합니다.
goBackwards()	갤러리를 한 프레임 뒤로 이동합니다.

3D 핫스팟

gwd-3d-hotspot

3D 모델에 주석을 표시하는 요소입니다.

속성

이름	설명
data-position:string	핫스팟의 위치입니다.
data-normal:string	핫스팟의 표준입니다.
hotspot-name:string	핫스팟의 이름입니다.
hotspot-title:string	정보 카드에 표시할 제목 텍스트입니다.
hotspot-description:string	정보 카드에 표시할 설명 텍스트입니다.
hide-infocard:boolean	정보 카드를 숨길지 여부를 나타냅니다.

3D 핫스팟 컨테이너

gwd-3d-hotspot-container

3D 모델의 주석을 위한 컨테이너 요소입니다.

속성

이름	설명
up-image:file	누르지 않은 상태의 3D 핫스팟 이미지 URL입니다.
over-image:file	마우스 오버 상태의 3D 핫스팟 이미지 URL입니다.
down-image:file	누른 상태의 3D 핫스팟 이미지 URL입니다.

3D 모델

gwd-3d-model

3D 뷰어 구성요소입니다.

속성

이름	설명
id-url:download	3D 모델의 ID 또는 URL입니다.
data-gwd-refresh-assets:string	3D 애셋을 새로고침해야 하는지 결정하기 위해 Google Web Designer에서 사용하는 속성입니다.
glass:boolean	3D 모델에 유리 소재를 사용합니다.
src:string	표시할 모델입니다.
transparent:boolean	3D 모델에서 투명한 배경을 사용합니다.
gesture-cue-icon:file	동작 큐 아이콘입니다.
gesture-cue-text:string	동작 큐 아이콘 아래에 표시되는 텍스트입니다.
gesture-cue-duration:number	동작 큐의 표시 시간(초)입니다. 값이 -1인 경우 시간 제한이 없습니다.

이벤트

이름	설명
scene-rendered	3D 모델 장면이 처음 렌더링된 후 전송됩니다.
camera-changed	3D 카메라 속성이 변경되면 전송됩니다. event.detail 객체에는 카메라의 모든 현재 속성이 포함되어 있습니다.
hotspot-clicked	핫스팟을 클릭하면 전송됩니다. event.detail 객체에는 클릭된 핫스팟의 이름이 포함되어 있습니다.
interaction-start	사용자가 3D 모델과 상호작용을 시작할 때 전송됩니다.
interaction-end	사용자가 3D 모델과 상호작용을 중지하면 전송됩니다.

메서드

이름	설명
setYaw(yaw:number)	카메라 제한을 고려하여 애니메이션 없이 요 각도를 설정합니다.
setTargetYaw(targetYaw:number)	카메라 제한 또는 -360도에서 360도 사이의 바닥 회전을 기준으로 목표 요 각도를 설정합니다.
setTargetPitch(targetPitch:number)	목표 피치 각도를 설정합니다.
incrementTargetPitch(pitchDelta:number)	델타 각도의 대상 피치를 증가시킵니다.
setTargetZoom(targetZoom:number)	목표 확대/축소를 설정합니다(미터 단위).
incrementTargetZoom(zoomDelta:number)	목표 확대/축소를 증가시킵니다(미터 단위).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	목표 피봇을 설정합니다(미터 단위).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	목표 로컬 팬을 설정합니다(미터 단위).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	소재 색상을 설정합니다.
playAnimation(animationName:string)	애니메이션을 재생합니다.
pauseAnimation(animationName:string)	애니메이션을 일시중지합니다.
setAnimationTime(animationName:string, animationTime:number)	애니메이션 시간을 설정합니다(초 단위).
lookAtHotspot(hotspotName:string)	카메라를 이동하고 회전하여 핫스팟에 초점을 맞춥니다.

3D 모델 뷰어

gwd-3d-model-viewer

3D 모델 뷰어 구성요소를 래핑하는 구성요소입니다.

속성

이름	설명
src:file	3D 모델의 소스 파일입니다.
gesture-cue-icon:file	동작 큐 아이콘입니다.
gesture-cue-text:string	동작 큐 아이콘 아래에 표시되는 텍스트입니다.
gesture-cue-duration:number	동작 큐의 표시 시간(초)입니다. 값이 -1인 경우 시간 제한이 없습니다.
skybox-image:file	3D 모델 장면의 배경 이미지입니다.
environment-image:file	3D 모델의 환경 반사를 제어합니다.

이벤트

이름	설명
scene-rendered	3D 모델 장면이 처음 렌더링된 후 전송됩니다.
camera-changed	3D 카메라 속성이 변경되면 전송됩니다. event.detail 객체에는 카메라의 모든 현재 속성이 포함되어 있습니다.
hotspot-clicked	핫스팟을 클릭하면 전송됩니다. event.detail 객체에는 클릭된 핫스팟의 이름이 포함되어 있습니다.
interaction-start	사용자가 3D 모델과 상호작용을 시작할 때 전송됩니다.
interaction-end	사용자가 3D 모델과 상호작용을 중지하면 전송됩니다.

메서드

이름	설명
setYaw(yaw:number)	카메라 제한을 고려하여 애니메이션 없이 요 각도를 설정합니다.
setTargetYaw(targetYaw:number)	카메라 제한 또는 -360도에서 360도 사이의 바닥 회전을 기준으로 목표 요 각도를 설정합니다.
setTargetPitch(targetPitch:number)	목표 피치 각도를 설정합니다.
incrementTargetPitch(pitchDelta:number)	델타 각도의 대상 피치를 증가시킵니다.
setTargetZoom(targetZoom:number)	목표 확대/축소를 설정합니다(미터 단위).
incrementTargetZoom(zoomDelta:number)	목표 확대/축소를 증가시킵니다(미터 단위).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	목표 피봇을 설정합니다(미터 단위).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	목표 로컬 팬을 설정합니다(미터 단위).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	소재 색상을 설정합니다.
playAnimation(animationName:string)	애니메이션을 재생합니다.
pauseAnimation(animationName:string)	애니메이션을 일시중지합니다.
setAnimationTime(animationName:string, animationTime:number)	애니메이션 시간을 설정합니다(초 단위).

캘린더에 추가

gwd-addtocalendar

캘린더에 이벤트를 추가합니다.

속성

이름	설명
event-title:string	사용자의 캘린더에 표시되는 이벤트 이름입니다.
start-date:string	이벤트가 시작되는 날짜입니다.
start-time:string	이벤트가 시작되는 시간입니다(24시간 단위).
end-date:string	이벤트가 종료되는 날짜입니다.
end-time:string	이벤트가 종료되는 시간입니다(24시간 단위).
timezone:string	이벤트의 시간대입니다. 설정되면 사용자가 다른 시간대에 있을 때 이에 맞게 시간이 조정됩니다.
location:string	이벤트의 위치입니다.
description:string	이벤트에 대한 설명입니다.
icalendar:boolean	iCalendar 파일 사용 여부입니다.
google:boolean	Google 캘린더 사용 여부입니다.
windows-live:boolean	Windows Live Calendar 사용 여부입니다.
yahoo:boolean	Yahoo Calendar 사용 여부입니다.
bg-color:string	드롭다운 배경색의 16진수 값입니다.
font-color:string	드롭다운 글꼴 색상의 16진수 값입니다.
font-family:string	드롭다운 글꼴의 이름입니다.
font-size:string	드롭다운 글꼴의 크기입니다.
font-weight:string	드롭다운 글꼴의 두께입니다.
highlight-color:string	드롭다운 강조표시 색상의 16진수 값입니다.

오디오

gwd-audio

HTMLAudioElement를 래핑하는 구성요소입니다.

속성

이름	설명
autoplay:boolean	로드 시 오디오 자동재생 여부입니다.
loop:boolean	완료 시 오디오 반복 여부입니다.
muted:boolean	오디오 음소거 시작 여부입니다.
controls:boolean	기본 네이티브 플레이어 컨트롤 사용 설정 여부입니다.
sources:file	쉼표로 구분되어 있는 여러 형식으로 된 오디오 소스의 문자열입니다.

이벤트

이름	설명
play	이전 일시중지 이벤트 이후 미디어가 재생되기 시작할 때 전송됩니다.
pause	재생이 일시중지될 때 전송됩니다.
playing	미디어가 재생되기 시작할 때(최초 재생 시, 일시중지 이후 또는 종료 및 다시 시작 후) 전송됩니다.
ended	재생이 완료될 때 전송됩니다.
volumechange	오디오 볼륨을 변경할 때 전송됩니다(볼륨 설정 시 및 음소거 속성 변경 시).
seeked	찾기 작업이 완료될 때 전송됩니다.
waiting	다른 작업(예: 찾기)이 아직 완료되지 않아 요청된 작업(예: 재생)이 지연될 때 전송됩니다.

메서드

이름	설명
mute()	음소거/음소거 해제 간에 오디오를 전환합니다.
pause()	오디오를 일시중지합니다.
play()	오디오를 재생합니다.
replay()	오디오를 다시 재생합니다.
seek(time:number)	오디오에서 지정된 시간으로 건너뜁니다.

회전 갤러리

gwd-carouselgallery

회전 스타일 레이아웃에 프레임을 표시하는 갤러리 객체입니다.

속성

이름	설명
images:string	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
groups:string	쉼표로 구분된 그룹 ID 문자열입니다.
transition-duration:number	갤러리 애니메이션 속도(밀리초)입니다.
start-frame:number	처음에 표시할 이미지의 수입니다.
autoplay:boolean	프레임에 대한 1회 자동 재생 여부입니다.
has-navigation:boolean	갤러리 내비게이션 컨트롤을 자동으로 포함할지 여부입니다.
navigation-thumbnails:boolean	내비게이션에 점 대신 썸네일 이미지를 사용할지 여부입니다.
navigation-highlight:color	내비게이션의 활성 프레임을 강조표시할 때 사용되는 CSS 색상입니다.
scaling:string	프레임에 맞게 이미지 콘텐츠 크기가 조절되는 방식입니다.
frame-width:number	콘텐츠 패널 하나의 너비입니다.
frame-height:number	콘텐츠 패널 하나의 높이입니다.
neighbor-rotation-y:number	현재 중앙에 위치한 패널의 주변 영역에 적용된 Y 축 회전입니다. 주변 패널을 기울일 때 사용됩니다.
neighbor-translation-x:number	현재 중앙에 위치한 패널의 주변 영역에 적용된 X 축 변환입니다. 주변 패널의 배치를 조정하는 데 사용됩니다.
neighbor-translation-y:number	현재 중앙에 위치한 패널의 주변 영역에 적용된 Y 축 변환입니다.
neighbor-translation-z:number	현재 중앙에 위치한 패널의 주변 영역에 적용된 Z축 변환입니다.
exit-urls:string	쉼표로 구분된 이탈 URL 문자열로, 갤러리의 이미지에 해당합니다.
show-reflection:boolean	CSS3에 기반한 반사 표시 여부입니다.
pause-front-media:boolean	현재 프레임이 변경될 때 이전 프레임의 미디어 요소(동영상 또는 오디오 등)를 일시중지할지 여부입니다.
resume-next-media:boolean	현재 프레임이 변경될 때 새로운 현재 프레임의 미디어 요소(동영상 또는 오디오 등)의 재생을 다시 시작할지 여부입니다.

이벤트

이름	설명
firstinteraction	사용자가 처음으로 갤러리와 상호작용할 때 전송됩니다.
allframesviewed	갤러리의 모든 프레임이 한 번 이상 표시되었을 때 전송됩니다.
allframesloaded	갤러리의 모든 프레임이 로드되었을 때 전송됩니다.
autoplayended	자동재생 종료 시 전송됩니다. event.detail.completed는 의도된 재생 시간을 경과하여 정상적으로 종료될 경우 true를, 그 외의 경우에는 false를 전달합니다.
frameshown	새 프레임이 표시되었을 때 전송됩니다.
frameactivated	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
frameautoplayed	프레임에 자동재생이 활성화되었을 때 전송됩니다. 한 번에 표시되는 여러 프레임에 대해 개별적으로 실행되므로 frameshown보다 더 자주 트리거될 수 있습니다.
frametap	사용자가 프레임을 탭할 때 전송됩니다.
reachleftend	갤러리가 왼쪽 끝에 도달했을 때 전송됩니다.
reachrightend	갤러리가 오른쪽 끝에 도달했을 때 전송됩니다.
trackstart	마우스 커서 또는 터치 드래그가 시작되면 전송됩니다.
track	구성요소가 마우스 커서 또는 터치 드래그와 연결된 X 및 Y 위치 데이터를 등록합니다.
trackend	마우스 커서 또는 터치 드래그가 종료되면 전송됩니다.

메서드

이름	설명
goToFrame(index:number, opt_animate:string)	지정된 프레임으로 이동합니다.
goForwards(opt_animate:string)	다음 프레임으로 이동합니다(있는 경우).
goBackwards(opt_animate:string)	이전 프레임으로 이동합니다.
rotateOnce(opt_duration:number, opt_direction:string)	갤러리의 모든 프레임을 한 번 표시합니다.
stopRotation()	현재의 애니메이션 회전을 중단합니다.

큐 포인트

gwd-cuepoint

Google Web Designer 동영상 구성요소에 연결되어 동영상이 특정 시간에 도달하면 이벤트를 실행하는 구성요소입니다.

속성

이름	설명
time:number	이벤트가 트리거되는 시간(초)입니다.

이벤트

이름	설명
cuepoint	미디어 재생이 큐 포인트에 정의된 시간에 도달하면 전송됩니다.

메서드

이름	설명
seek()	동영상 시간을 큐 포인트의 시간으로 설정합니다.
setTime(time:number)	큐 포인트의 시간을 설정합니다.

날짜 대체

gwd-dateswap

날짜 대체는 대상 기간과 비교해 현재 날짜가 어떤 시점인지에 따라, 요소의 공개 상태를 변경합니다.

속성

이름	설명
from_date:string	RFC2822 또는 ISO 8601 날짜를 나타내는 문자열입니다.
to_date:string	RFC2822 또는 ISO 8601 날짜를 나타내는 문자열입니다.

이벤트

이름	설명
before	현재 날짜가 from_date(제외)보다 이전이면 전송됩니다.
during	현재 날짜가 from_date~to_date(포함) 사이에 있으면 전송됩니다.
after	현재 날짜가 to_date(제외)보다 이후면 전송됩니다.

메서드

이름	설명
checkDate()	현재 날짜를 기간과 비교합니다.

갤러리 내비게이션

gwd-gallerynavigation

Google Web Designer 갤러리 구성요소의 탐색 컨트롤입니다.

속성

이름	설명
for:string	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
highlight:color	내비게이션의 활성 프레임을 강조표시할 때 사용되는 CSS 색상입니다.
use-thumbnails:boolean	내비게이션에 점 대신 썸네일 이미지를 사용할지 여부입니다.

일반 광고

gwd-genericad

일반 광고 컨테이너를 구현합니다.

이벤트

이름	설명
adinitialized	일반 요소가 광고 콘텐츠를 렌더링하기 직전에 전송됩니다.

메서드

이름	설명
initAd()	인에이블러에서 적절한 이벤트를 수신하는 즉시 광고를 시작합니다.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	광고의 확장된 크기로 이동합니다. 페이지 ID가 지정되지 않은 경우 광고가 기본 페이지로 이동합니다.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)	광고를 종료하고 원하는 경우 광고를 접습니다.

동작

gwd-gesture

여러 동작 이벤트의 추상화입니다.

속성

이름	설명
touch-action:string	터치 액션이 해석되어야 하는 방식입니다. 유효한 값은 auto, none, pan-x, pan-y입니다. 기본 동작은 none으로 설정된 경우와 동일합니다.

이벤트

이름	설명
hover	마우스 커서 또는 터치 위치가 구성요소 경계에 들어가면 전송됩니다.
hoverend	마우스 또는 터치 위치가 구성요소 경계에서 벗어나면 전송됩니다.
trackstart	마우스 커서 또는 터치 드래그가 시작되면 전송됩니다.
track	구성요소가 마우스 커서 또는 터치 드래그와 연결된 X 및 Y 위치 데이터를 등록합니다.
trackend	마우스 커서 또는 터치 드래그가 종료되면 전송됩니다.
tap	탭 사용 또는 마우스 클릭이 등록되면 전송됩니다.
swipeleft	사용자가 왼쪽으로 스와이프하면 전송됩니다.
swiperight	사용자가 오른쪽으로 스와이프하면 전송됩니다.
swipeup	사용자가 위쪽으로 스와이프하면 전송됩니다.
swipedown	사용자가 아래쪽으로 스와이프하면 전송됩니다.

Google 광고

gwd-google-ad

Google 광고 컨테이너를 구현합니다.

속성

이름	설명
polite-load:boolean	광고가 폴라이트 로드 의미 해석을 따르는지 여부입니다.
fullscreen:boolean	이 광고가 전체화면 확장을 시도해야 하는지 여부입니다.

이벤트

이름	설명
adinitialized	요소가 광고 콘텐츠를 렌더링하기 직전에 전송됩니다.
expandstart	인에이블러가 확장 시작 이벤트를 실행할 때 전송됩니다.
expandfinish	인에이블러가 확장 종료 이벤트를 실행할 때 전송됩니다.
collapsestart	인에이블러가 축소 시작 이벤트를 실행할 때 전송됩니다.
collapsefinish	인에이블러가 축소 종료 이벤트를 실행할 때 전송됩니다.
fullscreensupport	전체 화면 확장이 지원되는 경우에 전송됩니다.
dynamicelementsready	동적 데이터가 광고 콘텐츠에 적용된 후에 전송됩니다.
hostpagescroll	인에이블러가 호스트페이지 스크롤 이벤트를 실행할 때 전송됩니다.

메서드

이름	설명
initAd()	인에이블러에서 적절한 이벤트를 수신하는 즉시 광고를 시작합니다.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	광고의 확장된 크기로 이동합니다. 페이지 ID가 지정되지 않은 경우 광고가 기본 페이지로 이동합니다.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	광고를 종료하고 원하는 경우 광고를 접습니다.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Studio에 정의된 값과 관계없이 광고를 종료하고 지정한 URL로 이동합니다. opt_collapseOnExit가 true인 경우 광고를 접습니다.
incrementCounter(metric:string, opt_isCumulative:boolean)	카운터 이벤트를 추적합니다.
startTimer(timerId:string)	이벤트 타이머를 시작합니다.
stopTimer(timerId:string)	이벤트 타이머를 정지합니다.
reportManualClose()	플로팅, 팝업, 확장, 인페이지 팝업 또는 인페이지 플로팅 광고가 수동으로 닫힌 경우를 기록합니다. 이 메서드는 Enabler.reportManualClose의 프록시입니다.

핫스팟

gwd-hotspot

동영상의 특정 시간에 핫스팟을 표시하거나 숨기는 구성요소입니다.

속성

이름	설명
show-time:number	핫스팟 표시가 시작되는 시간(초)입니다.
hide-time:number	핫스팟 표시가 중지하는 시간(초)입니다.
left:string	동영상 위에서 동영상 프레임 너비를 기준으로 한 핫스팟의 왼쪽 위치입니다(예: '5%').
top:string	동영상 위에서 동영상 프레임 높이를 기준으로 한 핫스팟의 상단 위치입니다(예: '5%').
width:string	동영상과 비례하여 동영상 프레임 너비를 기준으로 한 핫스팟의 너비입니다.
height:string	동영상과 비례하여 동영상 프레임 높이를 기준으로 한 핫스팟의 높이입니다.

이벤트

이름	설명
hotspotshown	핫스팟이 표시되면 전송됩니다.
hotspothidden	핫스팟이 숨겨지면 전송됩니다.

메서드

이름	설명
show(showHide:boolean)	핫스팟 표시 상태를 전환합니다.
seek(showHide:boolean)	동영상 시간을 핫스팟의 표시 시간 또는 숨기기 시간으로 설정합니다.
setTimes(showTime:number, hideTime:number)	핫스팟의 표시 시간과 숨기기 시간을 설정합니다.

iframe

gwd-iframe

HTMLIframeElement를 래핑하는 구성요소입니다.

속성

이름	설명
source:string	iframe의 소스이며, 네이티브 이미지 요소의 src 속성을 대체합니다.
scrolling:string	iframe의 스크롤바 표시 여부입니다.

이벤트

이름	설명
iframeload	iframe이 로드되면 전송됩니다.

메서드

이름	설명
setUrl(url:string)	iframe의 URL을 변경하여 즉시 로드합니다.

이미지

gwd-image

HTMLImageElement를 래핑하여 이미지 소스의 지연된 로드를 지원하는 구성요소입니다.

속성

이름	설명
source:file	이미지 소스이며, 네이티브 이미지 요소의 src 속성을 대체합니다.
alt:string	이미지의 대체 텍스트입니다.
scaling:string	프레임에 맞게 이미지 크기가 조절되는 방식을 정의합니다.
alignment:string	보기 영역 내에서 이미지가 정렬되는 방식입니다.
focalpoint:string	이미지 초점을 x/y 픽셀 좌표로 인코딩합니다.
disablefocalpoint:boolean	focalpoint 속성(Google Web Designer에서 내부적으로 사용됨)에 의해 설정된 초점을 사용 중지합니다.

이미지 버튼

gwd-imagebutton

위쪽/위/아래쪽 상태를 지원하는 이미지 버튼입니다.

속성

이름	설명
up-image:file	버튼을 누르지 않은 상태의 버튼 이미지 URL입니다.
over-image:file	마우스 오버 상태의 버튼 이미지 URL입니다.
down-image:file	버튼을 누른 상태의 버튼 이미지 URL입니다.
bgcolor:string	버튼의 배경색입니다.
alignment:string	보기 영역 내에서 이미지가 정렬되는 방식입니다.
scaling:string	상위 컨테이너에서 이미지 크기가 맞아야 하는 방식입니다.
disabled:boolean	버튼의 사용 중지 여부입니다.

이벤트

이름	설명
imagebuttonloaded	모든 이미지가 로드되면 전송됩니다.

메서드

이름	설명
toggleEnable()	사용 설정됨/사용 중지됨 간에 전환합니다.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)	모든 버튼 상태의 이미지 소스를 설정합니다.

이미지 효과

gwd-image-effect

이미지 효과 구성요소입니다.

속성

이름	설명
scaling:string	프레임에 맞게 이미지 크기가 조절되는 방식을 정의합니다.
time-limit:number	애니메이션 시간 제한을 설정합니다. 값이 -1인 경우 시간 제한이 없습니다.
settings:string	구성요소 설정 대화상자를 시작합니다.
images:string	이미지 효과에 사용되는 이미지 경로의 쉼표로 구분된 문자열입니다.

이벤트

이름	설명
autoplayended	제한 시간에 도달하면 자동재생이 종료될 때 전송됩니다.

메서드

이름	설명
play()	애니메이션을 재생합니다.
pause()	애니메이션을 일시중지합니다.

이미지 효과 전후

gwd-before-and-after

두 개의 유사한 이미지가 '전후' 비교로 합성되는 이미지 효과입니다.

숨쉬기 이미지 효과

gwd-breathe

이미지를 탄력적으로 확장하고 축소하는 애니메이션 효과입니다.

드러내기 이미지 효과

gwd-reveal

하나의 이미지를 타원형 초점 영역이 훑고 지나가면서 두 번째 이미지를 표시하는 이미지 효과입니다.

물결 이미지 효과

gwd-wave

애니메이션 물결 변환을 이미지에 적용하여 이미지가 물결 패턴을 따라 흔들리도록 하는 이미지 효과입니다.

지도

gwd-map

HTMLElement를 확장하여 Google 지도 API 호출을 래핑합니다.

속성

이름	설명
api-key:string	Google API 키입니다. https://developers.google.com/maps/documentation/javascript/get-api-key를 참조하세요.
query:string	Google Places API에서 위치를 반환할 검색어 이름입니다.
start-latitude:decimal	시작 시 중앙 지점의 위도 좌표입니다. 값은 -90~90(도)이어야 합니다.
start-longitude:decimal	시작 시 중앙 지점의 경도 좌표입니다. 값은 -180~180(도)이어야 합니다.
request-user-location:boolean	사용자 위치에 대한 요청 여부입니다. true로 설정할 경우 사용자에게 위치를 공유해 달라는 메시지가 표시됩니다.
client-id:string	Google 지도 프리미어 고객 ID입니다.
search-radius:number	위치 검색을 실행할 최소 반경(미터)입니다.
result-limit:number	단일 쿼리에서 반환할 최대 결과 수입니다.
start-zoom:number	Google Maps API에서 사용하는 시작 시 확대/축소 수준의 단위입니다. 기본값은 주변 수준과 동일한 16입니다.
marker-src:string	켜기, 끄기, 음영 구성요소를 포함한 스프라이트가 되는 위치표시 이미지 파일 이름입니다.
gps-src:string	GPS 위치 파란색 점 이미지 파일 이름입니다.
msg-start-position-prompt:string	시작 위치를 선택하라는 대화상자 메시지 텍스트의 현지화된 문자열입니다.
msg-gps-button-label:string	Geolocation API에서 사용자 위치를 가져오는 버튼 라벨의 현지화된 문자열입니다.
msg-manual-position-button-label:string	위치 검색창을 표시하는 버튼 라벨의 현지화된 문자열입니다.
msg-manual-position-prompt:string	시작 시 지도 위치를 검색하기 위한 대화상자 메시지 텍스트의 현지화된 문자열입니다.
msg-manual-position-placeholder:string	시작 시 지도 위치를 찾기 위한 검색창 자리표시자 텍스트의 현지화된 문자열입니다.
msg-geocode-failure:string	위치정보 API 사용에 대한 시도가 실패했을 때 표시되는 대화상자 메시지 텍스트의 현지화된 문자열입니다.
msg-no-results-found:string	선택한 위치에서 발견된 지도 결과가 없는 경우 표시되는 대화상자 메시지 텍스트의 현지화된 문자열입니다.

이벤트

이름	설명
pinclick	사용자가 지도의 핀을 선택한 경우입니다.

메서드

이름	설명
setCenter(latitude:number, longitude:number, opt_accuracy:number)	위도/경도로 지정된 위치로 지도 중심을 설정합니다.

페이지

gwd-page

페이지는 페이지 데크의 단일 카드를 나타냅니다.

속성

이름	설명
expanded:boolean	이 페이지를 확장 페이지로 간주해야 하는지 여부입니다(광고만 해당).
centered:boolean	이 페이지의 콘텐츠를 중앙에 정렬해야 하는지 여부입니다.
alt-orientation-page:string	다른 방향으로 이 콘텐츠를 더욱 잘 나타내는 페이지의 페이지 ID입니다.

이벤트

이름	설명
attached	페이지가 DOM에 연결된 직후에 전송됩니다.
detached	DOM에서 페이지가 제거된 직후에 전송됩니다.
pageactivated	페이지 표시 준비를 마치면 전송됩니다.
pagedeactivated	페이지가 더 이상 표시되지 않으면 전송됩니다.
pageload	페이지 콘텐츠가 성공적으로 로드된 이후에 전송됩니다.
pagepresenting	페이지에서 소개 애니메이션을 시작하기 직전에 전송됩니다.
shake	기기 흔들기 동작이 감지될 때 전송됩니다.
tilt	기기 기울이기가 감지될 때 전송됩니다.
rotatetoportrait	기기가 세로 방향으로 회전할 때 전송됩니다.
rotatetolandscape	기기가 가로 방향으로 회전할 때 전송됩니다.

페이지 데크

gwd-pagedeck

페이지 데크는 페이지의 컨테이너로, 한 번에 하나의 페이지를 표시합니다. 여러 페이지가 정해진 순서에 따라 가장 앞에 순환 표시될 수 있으며, 지원되는 모든 페이지 전환을 사용할 수 있습니다.

속성

이름	설명
default-page:string	기본 페이지 ID입니다.

이벤트

이름	설명
pagetransitionstart	페이지 전환이 발생하기 전에 전송됩니다.
pagetransitionend	페이지 전환이 완료된 후에 전송됩니다.

메서드

이름	설명
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	페이지 데크에서 다음 페이지로 이동합니다.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	페이지 데크에서 이전 페이지로 이동합니다.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	페이지 데크에서 지정한 페이지로 이동합니다.
getCurrentPage()	페이지가 표시되지 않은 경우 현재 페이지 또는 null을 반환합니다.
getDefaultPage()	지정한 경우 기본 페이지로 돌아가며, 이외 경우에는 첫 번째 페이지로 돌아갑니다.
getPage(pageId:string)	지정한 ID가 포함된 페이지를 반환합니다.
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean)	지정한 값과 동일한 속성의 값이 있는 페이지 요소를 반환하거나 페이지를 찾을 수 없는 경우 -1을 반환합니다.
getOrientationSpecificPage(orientation:string, pageId:string)	지정한 방향에 해당하는 페이지를 반환합니다.
getElementById(id:string)	이 페이지 데크의 모든 페이지에서 지정한 ID가 있는 요소를 찾습니다. gwd-pagedeck는 DOM의 활성 페이지만 포함하고 있으므로, 표준 document.getElementById(id)는 비활성 페이지의 요소를 반환하지 않습니다. 비활성 페이지의 요소를 참조하는 것은 특히 동적 광고에서 일반적인 사용 방식입니다. 이러한 경우 ID로 요소를 역참조하는 데 이 메소드를 사용할 수 있습니다.

시차

gwd-parallax

시차 구성요소입니다.

속성

이름	설명
settings:string	구성요소 설정 대화상자를 시작합니다.
yscroll:decimal	스테이지에서 렌더링할 때 시차 애니메이션에 사용할 스크롤 요소입니다.

이벤트

이름	설명
ready	시차 구성요소의 모든 애셋이 로드되면 전송됩니다.

입자 효과

gwd-particleeffects

여러 입자 효과와 이미지를 합성하는 구성요소입니다.

속성

이름	설명
autoplay:boolean	구성요소 로드 시 애니메이션을 자동으로 재생할지 여부입니다.
time-limit:number	애니메이션 시간 제한을 설정합니다. 값이 -1인 경우 시간 제한이 없습니다.
settings:string	구성요소 설정 대화상자를 시작합니다.

이벤트

이름	설명
timelimitreached	애니메이션 재생이 지정된 시간 제한에 도달하면 전송됩니다.

메서드

이름	설명
play()	애니메이션을 재생합니다.
pause()	애니메이션을 일시중지합니다.
stop()	애니메이션을 중지합니다.

입자

gwd-particles

입자 시스템 구성요소입니다.

속성

이름	설명
acceleration-x:number	가속도의 x 구성요소입니다(px/프레임/프레임).
acceleration-y:number	가속도의 y 구성요소입니다(px/프레임/프레임).
angle-max:number	입자 속도 방향의 최대 각도입니다.
angle-min:number	입자 속도 방향의 최소 각도입니다.
autoplay:boolean	상위 gwd-particle 효과가 재생되기 시작할 때 애니메이션을 자동으로 재생할지 여부입니다.
color1:color	첫 번째 색상입니다.
color2:color	두 번째 색상입니다.
color-rate:number	색상이 [0, 1] 범위에서 추가로 프레임당 색상 1에서 색상 2로 변경되는 비율입니다.
emit-interval:number	다음 입자가 방출될 때까지의 프레임 수입니다.
emit-x-max:string	입자 방출 범위의 최대 x 좌표입니다.
emit-x-min:string	입자 방출 범위의 최소 x 좌표입니다.
emit-y-max:string	입자 방출 범위의 최대 y 좌표입니다.
emit-y-min:string	입자 방출 범위의 최소 y 좌표입니다.
loop:boolean	애니메이션 반복 여부입니다.
number:number	입자 수입니다.
opacity-min:number	입자의 최소 불투명도입니다.
opacity-max:number	입자의 최대 불투명도입니다.
opacity-rate:number	프레임당 불투명도가 변화하는 속도로, 입자의 현재 불투명도에 추가됩니다.
random-colors:boolean	입자에 색상 1과 색상 2 사이의 무작위 색상이 있는지 여부입니다. false인 경우 모든 입자가 색상 1로 초기화됩니다.
shape:string	스프라이트의 모양입니다.
size-max:number	입자의 최대 크기(px)입니다.
size-min:number	입자의 최소 크기(px)입니다.
size-rate:number	프레임당 크기가 변화하는 속도로, 입자의 현재 크기에 추가됩니다.
skip-forward:number	주어진 비율의 입자가 입자 시스템으로 방출된 시간으로 건너뜁니다.
speed-max:number	입자의 최대 속도입니다(px/프레임).
speed-min:number	입자의 최소 속도입니다(px/프레임).
sprite-image-src:file	스프라이트로 사용되는 이미지의 소스입니다.
turbulence-frequency:number	난기류 빈도입니다. 값이 클수록 동작 불규칙성이 더 자주 발생합니다. 양수여야 합니다.
turbulence-rate:number	시간 경과에 따른 강도 변화 속도입니다.
turbulence-strength:number	입자에 영향을 미치는 난기류의 강도입니다. 양수여야 합니다.
turbulence-trail:number	렌더링할 입자의 이전 및 현재 상태 수입니다.

메서드

이름	설명
play()	애니메이션을 재생합니다.
pause()	애니메이션을 일시중지합니다.
stop()	애니메이션을 중지합니다.

스프라이트 시트

gwd-spritesheet

스프라이트 시트의 단일 키프레임 또는 애니메이션을 표시합니다.

속성

이름	설명
imagesource:file	스프라이트 시트 이미지의 URL입니다.
offsetx:number	스프라이트 시트 왼쪽부터 다음까지의 오프셋입니다(픽셀). 스프라이트 시트에서 사용하려는 특정 이미지의 왼쪽 가장자리 애니메이션을 만드는 데 사용하는 첫 번째 스프라이트 이미지의 왼쪽 가장자리
offsety:number	스프라이트 시트 상단부터 다음까지의 오프셋입니다(픽셀). 스프라이트 시트에서 사용하려는 특정 이미지의 상단 가장자리 애니메이션을 만드는 데 사용하는 첫 번째 스프라이트 이미지의 상단 가장자리
clipwidth:number	다음 중 하나의 너비(픽셀)입니다. 스프라이트 시트에서 사용하려는 특정 이미지 애니메이션을 만드는 데 사용하는 첫 번째 스프라이트 이미지
clipheight:number	다음 중 하나의 높이(픽셀)입니다. 스프라이트 시트에서 사용하려는 특정 이미지 애니메이션을 만드는 데 사용하는 첫 번째 스프라이트 이미지
alignment:string	컨테이너 내에서 이미지 위치를 결정합니다.
scaling:string	구성요소 내에서 다양한 크기의 이미지가 표시되는 방식을 결정합니다.
totalframecount:number	애니메이션을 구성하는 프레임의 수입니다.
duration:number	각 프레임의 재생 시간(밀리초)입니다.
loopcount:number	애니메이션이 반복하는 횟수입니다. 0으로 설정하면 무제한으로 반복됩니다.
autoplay:boolean	애니메이션을 자동재생할지 여부입니다.
endonstartframe:boolean	애니메이션을 초기 프레임에 종료할지 여부입니다.
reverseplay:boolean	애니메이션을 역방향으로 재생할지 여부입니다.

이벤트

이름	설명
animationend	애니메이션이 종료되면 전송됩니다.
animationpause	애니메이션이 일시중지되면 전송됩니다.
animationplay	애니메이션 재생이 시작되면 전송됩니다.
animationrestart	애니메이션이 일시중지되었다가 다시 시작되면 전송됩니다.

메서드

이름	설명
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)	새 애니메이션을 정의합니다.
play()	애니메이션을 재생합니다.
pause()	애니메이션을 일시중지합니다.
togglePlay()	재생 및 일시중지 간에 애니메이션을 전환합니다.
restart()	애니메이션을 다시 시작합니다.
previousFrame()	이전 프레임을 표시합니다.
nextFrame()	다음 프레임을 표시합니다.
goToFrame(id:number)	프레임 숫자를 기준으로 특정 프레임을 표시합니다.

별표 평점

gwd-starratings

평점을 나타내는 일련의 별표를 렌더링하기 위한 구성요소입니다.

속성

이름	설명
ratingvalue:decimal	평점 값입니다.
iconsize:number	별표 아이콘 크기입니다.
isemptyshown:boolean	빈 별표 아이콘을 표시할지 여부입니다.
isemptycolored:boolean	빈 별표 아이콘에 색상을 지정할지 여부입니다.
colorprimary:color	기본 채우기 색상입니다.
colorsecondary:color	보조 그래디언트 색상입니다.
gradienttype:string	그래디언트 유형입니다.
ratingmax:number	최대 별표 평점입니다.
ratingmin:decimal	최소 별표 평점입니다.

이벤트

이름	설명
complete	별표 평점 아이콘이 생성된 시간입니다.
validationerror	별표 평점 값이 최소 평점보다 적습니다.

스트리트 뷰

gwd-streetview

Google 스트리트 뷰 구성요소입니다.

속성

이름	설명
key:string	애플리케이션의 고유 키를 얻는 자세한 방법은 https://developers.google.com/maps/documentation/javascript/get-api-key를 참조하세요.
latitude:decimal	위치의 위도 값입니다.
longitude:decimal	위치의 경도 값입니다.
interaction:boolean	보기의 이동/회전 가능 여부입니다.
heading:decimal	카메라의 나침반 방향을 나타냅니다. 0에서 360 사이의 값이 허용됩니다. 0, 360은 북쪽, 90은 동쪽, 180은 남쪽을 나타냅니다. 방향을 지정하지 않는 경우, 가장 최근 사진이 촬영된 지점에서 지정한 위치로 카메라의 방향을 향하게 하는 방식으로 값이 계산됩니다.
pitch:decimal	스트리트 뷰 차량을 기준으로 한 카메라의 위 또는 아래 방향 각도입니다. 보통(항상은 아님) 지평선을 향하게 됩니다. 양수 값은 카메라를 위로 올리고(90도가 수직 위쪽을 나타냄), 음수 값은 카메라를 아래로 내립니다(-90도가 수직 아래쪽을 나타냄).
zoom:number	스트리트 뷰 차량을 기준으로 카메라 확대/축소 수준을 지정합니다.

스와이프할 수 있는 갤러리

gwd-swipegallery

스와이프할 수 있는 콘텐츠 스트립에 프레임을 표시하는 갤러리 개체입니다.

속성

이름	설명
images:string	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
groups:string	쉼표로 구분된 그룹 ID 문자열입니다.
transition-duration:number	갤러리 애니메이션 속도(밀리초)입니다.
start-frame:number	시작 지점으로 사용할 기준이 되는 하나의 프레임입니다.
num-frames-to-display:number	한 번에 표시할 프레임 수입니다.
frame-snap-interval:number	스와이프 시 이동할 프레임 수입니다.
autoplay:boolean	자동으로 갤러리를 한 번 회전할지 여부입니다.
has-navigation:boolean	갤러리 탐색 컨트롤을 포함할지 여부입니다.
navigation-thumbnails:boolean	내비게이션에 점 대신 썸네일 이미지를 사용할지 여부입니다.
navigation-highlight:color	내비게이션의 활성 프레임을 강조표시할 때 사용되는 CSS 색상입니다.
scaling:string	프레임에 맞게 이미지 콘텐츠 크기가 조절되는 방식입니다.
swipe-axis:string	스와이프가 감지되는 축입니다.
offset:number	주변 콘텐츠 프레임 사이의 빈 공간 크기입니다.
frame-width:number	콘텐츠 프레임 하나의 너비입니다. num-frames-to-display를 재정의합니다.
frame-height:number	콘텐츠 프레임 하나의 높이입니다.
autoplay-duration:number	프레임을 자동재생할 총 재생 시간입니다.
autoplay-step-interval:number	자동재생이 진행되는 동안 각 프레임 단계 사이의 간격입니다.
exit-urls:string	쉼표로 구분된 이탈 URL 문자열로, 갤러리의 이미지에 해당합니다.
disable-gesture:boolean	갤러리에서 터치 이동을 가능하게 하는 동작 구성요소를 숨기거나 사용 중지합니다.
pause-front-media:boolean	현재 프레임이 변경될 때 이전 프레임의 미디어 요소(동영상 또는 오디오 등)를 일시중지할지 여부입니다.
resume-next-media:boolean	현재 프레임이 변경될 때 새로운 현재 프레임의 미디어 요소(동영상 또는 오디오 등)의 재생을 다시 시작할지 여부입니다.

이벤트

이름	설명
firstinteraction	사용자가 처음으로 갤러리와 상호작용할 때 전송됩니다.
allframesviewed	갤러리의 모든 프레임이 한 번 이상 표시되었을 때 전송됩니다.
allframesloaded	갤러리의 모든 프레임이 로드되었을 때 전송됩니다.
autoplayended	자동재생 종료 시 전송됩니다. event.detail.completed는 의도된 재생 시간을 경과하여 정상적으로 종료될 경우 true를, 그 외의 경우에는 false를 전달합니다.
frameshown	필요한 애니메이션이 완료된 후 새 프레임이 표시될 때 전송됩니다.
frameactivated	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
frameautoplayed	프레임에 자동재생이 활성화되었을 때 전송됩니다. 한 번에 표시되는 여러 프레임에 대해 개별적으로 실행되므로 frameshown보다 더 자주 트리거될 수 있습니다.
frametap	사용자가 프레임을 탭할 때 전송됩니다.
reachleftend	갤러리가 왼쪽 끝에 도달했을 때 전송됩니다.
reachrightend	갤러리가 오른쪽 끝에 도달했을 때 전송됩니다.
framemouseover	사용자가 프레임 위로 마우스 커서를 올릴 때 전송됩니다.
framemouseout	사용자가 프레임 밖으로 마우스 커서를 이동할 때 전송됩니다.
trackstart	마우스 커서 또는 터치 드래그가 시작되면 전송됩니다.
track	구성요소가 마우스 커서 또는 터치 드래그와 연결된 X 및 Y 위치 데이터를 등록합니다.
trackend	마우스 커서 또는 터치 드래그가 종료되면 전송됩니다.

메서드

이름	설명
goToFrame(frame:number, opt_animate:string)	지정한 프레임으로 이동합니다.
rotateOnce(opt_duration:number, opt_direction:string)	갤러리의 모든 프레임을 한 번 표시합니다.
stopRotation()	현재의 애니메이션 회전을 중단합니다.
goForwards()	갤러리를 한 프레임 앞으로 이동합니다.
goBackwards()	갤러리를 한 프레임 뒤로 이동합니다.

소용돌이

gwd-swirl

소용돌이 구성요소입니다.

속성

이름	설명
yscroll:decimal	스테이지에서 렌더링할 때 소용돌이 애니메이션에 사용할 스크롤 요소입니다.
settings:string	구성요소 설정 대화상자를 시작합니다.

이벤트

이름	설명
ready	모든 하위 애셋이 로드되면 전송됩니다.

탭 영역

gwd-taparea

클릭/탭 이벤트 추상화입니다.

속성

이름	설명
exit-override-url:string	탭 영역을 탭했을 때 이탈할 URL입니다.

이벤트

이름	설명
action	사용자가 버튼을 터치(모바일)하거나 클릭(데스크톱)할 때 전달됩니다.

탭하여 전화/문자

gwd-taptocall

클릭하거나 터치했을 때 전화번호로 전화하거나 SMS를 전송하는 구성요소입니다.

속성

이름	설명
number:string	전화하거나 메시지를 보낼 전화번호입니다.
action:string	SMS 메시지를 전송하거나 전화 통화를 시작합니다.

이벤트

이름	설명
action	사용자가 버튼을 터치(모바일)하거나 클릭(데스크톱)할 때 전달됩니다.
taptocall	통화 또는 SMS가 시작될 때 전송됩니다.

메서드

이름	설명
dial()	구성된 번호로 전화를 걸거나 SMS 메시지를 보냅니다.

전환 갤러리

gwd-transitiongallery

전환 갤러리 구성요소입니다.

속성

이름	설명
settings:string	구성요소 설정 대화상자를 시작합니다.
images:string	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
scaling:string	프레임에 맞게 이미지 크기가 조절되는 방식을 정의합니다.
exit-urls:string	쉼표로 구분된 이탈 URL 문자열로, 갤러리의 이미지에 해당합니다.

이벤트

이름	설명
autoplayended	자동재생 종료 시 전송됩니다. event.detail.completed는 의도된 루프 수에 도달하여 정상적으로 종료되면 true를, 그 외의 경우에는 false를 전달합니다.
frameactivated	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
frameshown	새 프레임이 표시되었을 때 전송됩니다.
frametap	사용자가 프레임을 탭할 때 전송됩니다.
rotateonceended	회전 종료 시 전송됩니다. event.detail.completed가 정상적으로 종료되면 true를, 그렇지 않으면 false를 전달합니다.
reachleftend	갤러리가 왼쪽 끝에 도달했을 때 전송됩니다.
reachrightend	갤러리가 오른쪽 끝에 도달했을 때 전송됩니다.

메서드

이름	설명
goToFrame(frame:number, with_animation:boolean)	지정한 프레임으로 이동합니다.
rotateOnce(startFromCurrentFrame:boolean)	startFromCurrentFrame이 false이거나 지정되지 않은 경우 시작 프레임부터 갤러리에 프레임을 표시하고, 그렇지 않으면 현재 프레임부터 표시합니다. 시작 프레임에 도달하기 전에 회전은 중지됩니다.
startAutoplay(startFromCurrentFrame:boolean)	startFromCurrentFrame이 false이거나 지정되지 않은 경우 시작 프레임부터 갤러리에서 자동재생을 시작하고, 그렇지 않으면 현재 프레임부터 시작합니다. 반복 횟수에 도달하면 자동재생이 중지됩니다.
stop()	진행 중인 애니메이션을 취소합니다.
goForwards()	갤러리를 한 프레임 앞으로 이동합니다.
goBackwards()	갤러리를 한 프레임 뒤로 이동합니다.

블라인드 전환

gwd-blinds

블라인드 효과 구성요소입니다. 한쪽 가장자리에서 시작하여 반대쪽 가장자리로 진행되면서 하나씩 열리는 슬랫이 있는 창 블라인드처럼 새 이미지를 표시합니다.

속성

이름	설명
direction:dropdown	효과의 방향입니다.
blinds:number	블라인드의 수입니다.
transparentbackground:boolean	새 이미지의 블라인드를 렌더링하기 전에 투명한 배경을 표시할지 여부입니다. false인 경우 블라인드가 기존 이미지에 오버레이됩니다.

도어 와이프 전환

gwd-door-wipe

도어 와이프 효과 구성요소는 와이프 효과의 변형으로, 와이프의 방향에 따라 두 가지 유형이 있습니다. 열린 도어 와이프는 쌍여닫이문이 열리는 것처럼 이전 이미지의 중앙부터 새 이미지를 표시됩니다. 닫힌 도어 와이프는 쌍여닫이문이 닫히는 것처럼 이전 이미지의 가장자리에서 중앙으로 새 이미지를 표시합니다.

속성

이름	설명
orientation:dropdown	애니메이션의 방향입니다.
direction:dropdown	도어 와이프 효과의 방향입니다.

페이드 전환

gwd-fade

전환 페이드 구성요소입니다.

아이리스 와이프 전환

gwd-iris-wipe

기본적으로 프레임의 중심에서 점점 커지는 원으로 새 이미지를 표시하는 아이리스 와이프 효과 구성요소입니다.

속성

이름	설명
originpercentx:number	프레임 너비를 기준으로 x축에서 커지는 원의 첫 위치입니다.
originpercenty:number	프레임 높이를 기준으로 y축에서 커지는 원의 첫 위치입니다.

푸시 전환

gwd-push

푸시 효과 유형 구성요소입니다. 새 이미지가 이전 이미지를 보기 밖으로 밀어내며 대체됩니다.

속성

이름	설명
direction:dropdown	푸시 효과의 방향입니다.

방사형 와이프 전환

gwd-radial-wipe

방사형 와이프 효과 구성요소는 와이프 효과가 변형된 형태입니다. 마치 시곗바늘이 돌아가듯이 새 이미지가 지정된 지점 주변의 반경을 훑으면서 표시됩니다.

속성

이름	설명
direction:dropdown	효과의 방향입니다.
originpercentx:number	프레임 너비 기준 x축의 첫 위치로, 반경을 훑으면서 새 이미지를 표시합니다.
originpercenty:number	프레임 높이 기준 y축의 첫 위치로, 반경을 훑으면서 새 이미지를 표시합니다.

회전 전환

gwd-rotate

회전 효과 구성요소입니다. 이전 이미지가 회전하면서 확대되고, 다시 축소되면서 회전이 종료되면 새 이미지가 나타납니다.

속성

이름	설명
direction:dropdown	효과의 방향입니다.

슬라이스 전환

gwd-slice

슬라이스 효과 구성요소입니다. 새 이미지가 슬라이스 또는 막대 형식으로 순차적으로 표시됩니다.

속성

이름	설명
direction:dropdown	슬라이스 효과의 방향입니다.
slices:number	화면을 분할하는 슬라이스 또는 막대의 수입니다.
transparentbackground:boolean	새 이미지가 슬라이스가 슬라이드되기 전에 투명한 배경을 표시할지 여부입니다. false인 경우 슬라이스가 기존 이미지에 오버레이됩니다.

스플릿 푸시 전환

gwd-split-push

스플릿 푸시 효과 구성요소는 푸시 효과가 변형된 형태입니다. 기존 이미지가 2개의 수직 또는 수평 부분으로 분할됩니다. 새 이미지의 해당하는 분할 부분이 기존 이미지의 각 부분을 반대 방향에서 보이지 않게 밀어냅니다.

속성

이름	설명
orientation:dropdown	애니메이션의 방향입니다.

스트라이프 와이프 전환

gwd-stripe-wipe

스트라이프 와이프 전환 구성요소는 와이프 효과가 변형된 형태입니다. 색상이 교차하는 단색 스트라이프가 동시에 화면에서 확장되며 기존 이미지를 덮습니다. 그런 다음 스트라이프가 축소되며 새 이미지가 표시됩니다.

속성

이름	설명
direction:dropdown	효과의 방향입니다.
stripes:number	각 색상의 스트라이프 수입니다.
color1:color	두 가지 교차 스트라이프 색상 중 하나의 16진수 값입니다.
color2:color	나머지 교차 스트라이프 색상의 16진수 값입니다.

베니션 블라인드 전환

gwd-venetian-blinds

베니션 블라인드 효과 구성요소입니다. 동시에 또는 차례로 열리는 슬랫이 있는 베니션 블라인드처럼 새 이미지를 표시합니다.

속성

이름	설명
orientation:dropdown	애니메이션의 방향입니다.
blinds:number	블라인드의 수입니다.
staggered:boolean	슬랫이 지연으로 전환되는지의 여부입니다. false인 경우 모든 슬랫 전환이 동시에 이루어집니다.

와이프 전환

gwd-wipe

전환 와이프 구성요소입니다. 일반 와이프 효과에서는 한쪽 가장자리에서 반대편 가장자리로 와이핑되는 라인 뒤의 기존 이미지를 새 이미지가 조금씩 대체합니다.

속성

이름	설명
direction:dropdown	효과의 방향입니다.
angle:number	이전 이미지를 새 이미지로 대체하는 선을 기울이는 각도입니다.

지그재그 전환

gwd-zigzag

지그재그 효과 구성요소입니다. 새 이미지가 구불구불한 그리드 패턴으로 표시됩니다. 수평 지그재그 효과에서는 새 이미지의 타일을 왼쪽에서 오른쪽으로, 그리고 오른쪽에서 왼쪽으로 번갈아가며 연속적인 행으로 표시합니다. 수직 지그재그 효과에서는 새 이미지의 타일을 위에서 아래로, 그리고 아래에서 위로를 번갈아가며 연속적인 열로 표시합니다.

속성

이름	설명
orientation:dropdown	애니메이션의 방향입니다.
rows:number	지그재그 효과의 행 개수입니다.
columns:number	지그재그 효과의 열 개수입니다.

동영상

gwd-video

HTMLVideoElement를 래핑하는 구성요소입니다.

속성

이름	설명
autoplay:boolean	로드될 때 동영상의 자동재생 여부입니다.
loop:boolean	완료될 때 동영상의 반복 여부입니다.
muted:boolean	동영상의 음소거 시작 여부입니다.
controls:boolean	기본 네이티브 플레이어 컨트롤 사용 설정 여부입니다.
sources:file	쉼표로 구분되어 있는 다양한 형식으로 된 동영상의 문자열입니다.
poster:string	사용자가 재생하거나 찾을 때까지 표시할 포스터 프레임을 나타내는 URL입니다.

이벤트

이름	설명
play	미디어 재생이 일시중지되었다가 다시 재생되기 시작할 때 전송됩니다. 즉, 이전 일시중지 이벤트 이후에 재생이 다시 시작되었을 때 전송됩니다.
pause	재생이 일시중지될 때 전송됩니다.
playing	미디어가 재생되기 시작할 때 전송됩니다(최초 재생 시, 일시중지 이후 또는 종료 및 다시 시작 후).
ended	재생이 완료될 때 전송됩니다.
volumechange	오디오 볼륨을 변경할 때 전송됩니다(볼륨 설정 시 및 음소거 속성 변경 시).
seeked	찾기 작업이 완료될 때 전송됩니다.
waiting	다른 작업(예: 찾기)이 아직 완료되지 않아 요청된 작업(예: 재생)이 지연될 때 전송됩니다.

메서드

이름	설명
mute()	음소거/음소거 해제 간에 동영상을 전환합니다.
pause()	동영상을 일시중지합니다.
play()	동영상을 재생합니다.
replay()	동영상을 재생합니다.
seek(time:number)	동영상에서 지정된 시간으로 건너뜁니다.
setVolume(volume:number)	동영상의 볼륨을 설정합니다.
setSources(sources:string)	동영상의 소스를 설정합니다.

YouTube

gwd-youtube

HTMLElement를 확장하여 YouTube API 호출을 래핑합니다.

속성

이름	설명
video-url:string	동영상의 YouTube URL입니다.
autoplay:string	지원되는 환경의 경우 로드 시 YouTube 동영상이 자동재생됩니다.
preview-duration:number	미리보기의 재생 시간을 설정합니다. 자동재생 속성이 preview로 설정된 경우에만 사용됩니다.
controls:string	동영상 컨트롤(none, autohide)을 표시합니다.
color:string	플레이어 진행 표시줄의 색상 테마입니다(빨간색 또는 흰색).
muted:boolean	동영상의 음소거 시작 여부입니다.
loop:boolean	완료될 때 동영상의 반복 여부입니다.
pause-on-end:boolean	남은 시간이 1초일 때 동영상을 일시중지합니다.
start-position:number	특정 시간(초)부터 동영상을 시작합니다.
allowfullscreen:boolean	데스크톱에서 전체화면을 허용합니다.
extra-player-args:string	https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters에 설명된 것과 같은 추가 YouTube 플레이어 매개변수입니다.

이벤트

이름	설명
buffering	YouTube 플레이어가 버퍼링 중입니다.
ended	YouTube 동영상이 끝까지 재생되었습니다.
paused	YouTube 동영상이 일시중지되었습니다.
playing	YouTube 동영상이 재생되기 시작했습니다.
replayed	YouTube 동영상애 다시 재생되었습니다.
viewed0percent	동영상을 0% 시청하면 전송됩니다.
viewed25percent	동영상을 25% 시청하면 전송됩니다.
viewed50percent	동영상을 50% 시청하면 전송됩니다.
viewed75percent	동영상을 75% 시청하면 전송됩니다.
viewed100percent	동영상을 100% 시청하면 전송됩니다.
previewed0percent	미리보기를 0% 시청하면 전송됩니다.
previewed25percent	미리보기를 25% 시청하면 전송됩니다.
previewed50percent	미리보기를 50% 시청하면 전송됩니다.
previewed75percent	미리보기를 75% 시청하면 전송됩니다.
previewed100percent	미리보기를 100% 시청하면 전송됩니다.

메서드

이름	설명
toggleMute()	음소거/음소거 해제 간에 동영상을 전환합니다.
pause()	동영상을 일시중지합니다.
play()	동영상을 재생합니다.
replay()	동영상을 재생합니다.
seek(time:number)	동영상에서 지정된 시간으로 건너뜁니다.
setYouTubeId(id:string, cueOnly:boolean)	YouTube 동영상 소스를 지정된 ID로 변경합니다.