Steve Jobes
Steve Jobes is a fictional character designed to resemble someone familiar to readers.
Types
Shape
A shape is a three dimensional object including any flat content as a side.
Joined in 2014
151 Friends
Stevie Feliciano
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
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
Getting Started
Required Markup
Shapes can have any arbitrary content, just wrap each side in side
This side starts visible.
This is yet another side
This is the last side
Animating with Javascript
Animations use CSS3 transitions and Javascript to set-up the correct conditions.
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 animation 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 |
| destroy | Destroys instance and removes all events |
Shape Settings
Shape settings modify the shape's behavior
| Setting | Default | Description |
|---|---|---|
| duration | 700ms | Duration of side change animation |
| width 2.2 |
initial |
When set to
next will use the width of the next side during the shape's animation.When set to
initial it will use the width of the shape at initialization.When set to a specific pixel height, will force the width to that height.
|
| height 2.2 |
initial |
When set to
next will use the height of the next side during the shape's animation.When set to
initial it will use the height of the shape at initialization.When set to a specific pixel height, will force the height to that height.
|
Callbacks
Callbacks specify a function to occur after a specific behavior.
| Setting | Context | Description |
|---|---|---|
| onBeforeChange | 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 |
| silent | false | Silences all console output including error messages, regardless of other debug settings. |
| debug | false | Provides standard debug output to console |
| performance | true | Provides standard debug output to console |
| verbose | false | 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'
}
|
|