셰이프
셰이프 (Shape)
내용을 3차원 객체처럼 여러 면에 배치하고, 면마다 뒤집거나 회전하며 보여 주는 컴포넌트예요. 카드, 입방체, 텍스트 면 등 다양한 모양을 쓸 수 있어요.
출처: 문서
본문
유형 (Types)
셰이프 (Shape)
셰이프는 평평한 콘텐츠를 면(side)으로 포함하는 3차원 객체예요.
Steve Jobes
Acquaintances
Steve Jobes is a fictional character designed to resemble someone familiar to readers.
Joined in 2014
151 Friends
Stevie Feliciano
Joined in 2014
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
22 Friends
큐브 (Cube)
큐브 셰이프는 각 면이 큐브의 면이 되도록 구성돼요.
1
2
3
4
5
6
텍스트 (Text)
텍스트 셰이프는 텍스트 면들이 표시될 수 있게 구성돼요.
Using Shapes
A shape must have defined width and heights for each side or else text flow may change during animation
The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
Did you know? This side starts visible.
Help, its another side!
This is the last side
예시 (Examples)
셰이프 유형 (Shape Types)
셰이프는 정확히 규칙적이거나 면들의 길이·너비가 정확히 맞아 떨어질 필요 없이도 애니메이션이 잘 동작해요.
Shape
Auto
Square
Irregular
시작하기 (Getting Started)
필요한 마크업 (Required Markup)
셰이프는 임의의 내용을 가질 수 있어요. 각 면을 side로 감싸기만 하면 돼요.
This side starts visible.
This is yet another side
This is the last side
Javascript로 애니메이션하기 (Animating with Javascript)
애니메이션은 CSS3 트랜지션과 Javascript를 사용해 올바른 조건을 설정해요.
$('.shape').shape();
$('.shape').shape('flip up');
$('.shape')
.shape('set next side', '.second.side')
.shape('flip up')
;
$('.shape').shape('repaint');
동작 (Behavior)
다음 모든 동작들을 다음 구문으로 호출할 수 있어요:
$('.your.element')
.shape('behavior name', argumentOne, argumentTwo)
;
Behavior / Description
flip up
셰이프를 위로 뒤집어요.
flip down
셰이프를 아래로 뒤집어요.
flip right
셰이프를 오른쪽으로 뒤집어요.
flip left
셰이프를 왼쪽으로 뒤집어요.
flip over
셰이프를 시계 방향으로 뒤집어요.
flip back
셰이프를 시계 반대 방향으로 뒤집어요.
set next side(selector)
다음 면을 특정 선택자로 설정해요.
is animating
셰이프가 현재 애니메이션 중인지 여부를 반환해요.
reset
모든 인라인 스타일을 제거해요.
queue(animation)
현재 애니메이션 다음에 애니메이션을 대기시켜요.
repaint
요소에 리플로우(reflow)를 강제해요.
set default side
다음 면을 활성 요소의 다음 형제로 설정해요.
set stage size
다음 면의 콘텐츠 크기로 셰이프를 설정해요.
refresh
요소 면의 선택자 캐시를 새로 고쳐요.
get transform down
아래에 배치된 다음 면에 대한 변환을 반환해요.
get transform left
왼쪽에 배치된 다음 면에 대한 변환을 반환해요.
get transform right
오른쪽에 배치된 다음 면에 대한 변환을 반환해요.
get transform up
위에 배치된 다음 면에 대한 변환을 반환해요.
get transform down
아래에 배치된 다음 면에 대한 변환을 반환해요.
destroy
인스턴스를 파괴하고 모든 이벤트를 제거해요.
셰이프 설정 (Shape Settings)
셰이프 설정은 셰이프의 동작을 수정해요.
Setting / Default / Description
duration
700ms
면 변경 애니메이션의 지속 시간이에요.
width 2.2
initial
`next`로 설정하면 셰이프 애니메이션 중 다음 `side`의 너비를 사용해요.
`initial`로 설정하면 초기화 시 셰이프의 너비를 사용해요.
특정 픽셀 높이로 설정하면 그 높이로 너비를 강제해요.
height 2.2
initial
`next`로 설정하면 셰이프 애니메이션 중 다음 `side`의 높이를 사용해요.
`initial`로 설정하면 초기화 시 셰이프의 높이를 사용해요.
특정 픽셀 높이로 설정하면 그 높이로 높이를 강제해요.
콜백 (Callbacks)
콜백은 특정 동작 이후에 실행할 함수를 지정해요.
Setting / Context / Description
onBeforeChange
Next Side
면 변경 전에 호출돼요.
onChange
Active Side
보이는 면이 변경된 후 호출돼요.
DOM 설정 (DOM Settings)
DOM 설정은 이 모듈이 DOM과 어떻게 상호작용할지 지정해요.
Setting / Default / Description
namespace
shape
이벤트 네임스페이스예요. 모듈 해제가 요소에 붙은 다른 이벤트에 영향을 주지 않게 해요.
selector
selector : {
sides : '.sides',
side : '.side'
}
className
className : {
animating : 'animating',
hidden : 'hidden',
loading : 'loading',
active : 'active'
}
디버그 설정 (Debug Settings)
디버그 설정은 콘솔의 디버그 출력을 제어해요.
Setting / Default / Description
name
Shape
디버그 로그에서 사용되는 이름이에요.
silent
false
다른 디버그 설정과 관계없이 오류 메시지를 포함한 모든 콘솔 출력을 잠재워요.
debug
false
콘솔에 표준 디버그 출력을 제공해요.
performance
true
콘솔에 표준 디버그 출력을 제공해요.
verbose
false
콘솔에 보조 디버그 출력을 제공해요.
error
error: {
side : 'You tried to switch to a side that does not exist.',
method : 'The method you called is not defined'
}