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.
Types
Shape
A standard shape
This side starts visible.
This is yet another side
This is the last side
Cube
A cube shape is formatted so that each side is the face of a cube
1
2
3
4
5
6
Text
A text shape is formatted to allow for sides of text to be displayed
Did you know? This side starts visible.
Help, its another side!
This is the last side
Examples
Shape Types
Shapes do not have to be regular or have its sides match up in length and width to animate correctly.
Shape
Shape with Content
Any type of element can be used as a side of a shape.
$('.dog.shape')
.eq(0)
.shape('flip over')
.end()
.eq(1)
.shape('flip back')
;
Getting Started
Initializing a shape
$('.shape').shape();
Transitions automatically assume next side is the next sibling (or first if last element)
$('.shape').shape('flip up');
To manually set the next side to appear use a selector or jQuery object
$('.shape')
.shape('set next side', '.second.side')
.shape('flip up')
;
Any internal method can be invoked programmatically
$('.shape').shape('repaint');
Behavior
All the following behaviors can be called using the syntax:
$('.your.element')
.shape('behavior name', argumentOne, argumentTwo)
;
| Behavior | Description |
|---|---|
| flip up | Flips the shape upward |
| flip down | Flips the shape downward |
| flip right | Flips the shape right |
| flip left | Flips the shape left |
| flip over | Flips the shape over clock-wise |
| flip back | Flips the shape over counter-clockwise |
| set next side(selector) | Set the next side to a specific selector |
| is animating | Returns whether shape is currently animating |
| reset | Removes all inline styles |
| queue(animation) | Queues an animationtill after current animation |
| repaint | Forces a reflow on element |
| set default side | Set the next side to next sibling to active element |
| set stage size | Sets shape to the content size of the next side |
| refresh | Refreshes the selector cache for element sides |
| get transform down | Returns translation for next side staged below |
| get transform left | Returns translation for next side staged left |
| get transform right | Returns translation for next side staged right |
| get transform up | Returns translation for next side staged up |
| get transform down | Returns translation for next side staged down |
Shape Settings
Shape settings modify the shape's behavior
| Setting | Default | Description |
|---|---|---|
| duration | 700ms | Duration of side change animation |
Callbacks
Callbacks specify a function to occur after a specific behavior.
| Setting | Context | Description |
|---|---|---|
| beforeChange | Next Side | Is called before side change |
| onChange | Active Side | Is called after visible side change |
DOM Settings
DOM settings specify how this module should interface with the DOM
| Setting | Default | Description |
|---|---|---|
| namespace | shape | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| selector |
selector : {
sides : '.sides',
side : '.side'
}
|
|
| className |
className : {
animating : 'animating',
hidden : 'hidden',
loading : 'loading',
active : 'active'
}
|
|
Debug Settings
Debug settings controls debug output to the console
| Setting | Default | Description |
|---|---|---|
| name | Shape | Name used in debug logs |
| debug | False | Provides standard debug output to console |
| performance | True | Provides standard debug output to console |
| verbose | True | Provides ancillary debug output to console |
| error |
error: {
side : 'You tried to switch to a side that does not exist.',
method : 'The method you called is not defined'
}
|
|