67種類ものエフェクトが使えるjQueryプラグイン PAGE TRANSITIONS
66種類ものスライドが使えるjQueryプラグイン
PAGE TRANSITIONSをつかってみた。
http://tympanus.net/Development/PageTransitions/
非常にクオリティの高いエフェクトが揃っており、
様々なオブジェクトに対して利用できるため、これだけ使ってれば良いのではと思えた。
設置方法は
|
1 2 3 4 5 6 | <ul class="dl-submenu"> <li data-animation="1"><a href="#">右から左へスライド</a></li> <li data-animation="2"><a href="#">左から右へスライド</a></li> <li data-animation="3"><a href="#">下から上へスライド</a></li> <li data-animation="4"><a href="#">上から下へスライド</a></li> </ul> |
このように、dl-submenuを親として、その下にdata-animation=nというように
nでエフェクトの方法を指定する。
以下はすべての動きとdata-animationの対応表。
| 大カテゴリ | 中カテゴリ | 小カテゴリ | 動作説明 | data-animation |
|---|---|---|---|---|
| MOVE | MOVE TO LEFT/ FROM RIGHT | 右から左へスライド | 1 | |
| MOVE TO RIGHT/ FROM LEFT | 左から右へスライド | 2 | ||
| MOVE TO TOP/ FROM BOTTOM | 下から上へスライド | 3 | ||
| MOVE TO BOTTOM/ FROM TOP | 上から下へスライド | 4 | ||
| FADE | FADE / FROM RIGHT | 右から左へフェード | 5 | |
| FADE / FROM LEFT | 左から右へフェード | 6 | ||
| FADE / FROM BOTTOM | 下から上へフェード | 7 | ||
| FADE / FROM TOP | 上から下へフェード | 8 | ||
| FADE LEFT / FADE RIGHT | 右フェードから左へフェード | 9 | ||
| FADE RIGHT / FADE LEFT | 左フェードから右へフェード | 10 | ||
| FADE TOP / FADE BOTTOM | 下フェードから上へフェード | 11 | ||
| FADE BOTTOM / FADE TOP | 上フェードから下へフェード | 12 | ||
| DIFFERENT EASING | DIFFERENT EASING / FROM RIGHT | 右から左へフェード改 | 13 | |
| DIFFERENT EASING / FROM LEFT | 左から右へフェード改 | 14 | ||
| DIFFERENT EASING / FROM BOTTOM | 下から上へフェード改 | 15 | ||
| DIFFERENT EASING / FROM TOP | 上から下へフェード改 | 16 | ||
| SCALE | SCALE DOWN / FROM RIGHT | 右から左へ縮小 | 17 | |
| SCALE DOWN / FROM LEFT | 左から右へ縮小 | 18 | ||
| SCALE DOWN / FROM BOTTOM | 下から上へ縮小 | 19 | ||
| SCALE DOWN / FROM TOP | 上から下へ縮小 | 20 | ||
| SCALE DOWN / SCALE DOWN | 縮小後縮小 | 21 | ||
| SCALE UP / SCALE UP | 拡大後拡大 | 22 | ||
| MOVE TO LEFT / SCALE UP | 左へ移動して拡大 | 23 | ||
| MOVE TO RIGHT / SCALE UP | 右へ移動して拡大 | 24 | ||
| MOVE TO TOP / SCALE UP | 上へ移動して拡大 | 25 | ||
| MOVE TO BOTTOM / SCALE UP | 下へ移動して拡大 | 26 | ||
| SCALE DOWN / SCALE UP | 縮小後拡大 | 27 | ||
| ROTATE | GLUE | GLUE LEFT / FROM RIGHT | 右から左へ畳み | 28 |
| GLUE RIGHT / FROM LEFT | 左から右へ畳み | 29 | ||
| GLUE BOTTOM / FROM TOP | 下から上へ畳み | 30 | ||
| GLUE TOP / FROM BOTTOM | 上から下へ畳み | 31 | ||
| FLIP | FLIP RIGHT | 右へ回転 | 32 | |
| FLIP LEFT | 左へ回転 | 33 | ||
| FLIP TOP | 上へ回転 | 34 | ||
| FLIP BOTTOM | 下へ回転 | 35 | ||
| FALL | 落ちる | 36 | ||
| NEWSPAPER | くるくる | 37 | ||
| PUSH / PULL | PUSH LEFT / FROM RIGHT | 右から左へ押し出し | 38 | |
| PUSH RIGHT / FROM LEFT | 左から右へ押し出し | 39 | ||
| PUSH TOP / FROM BOTTOM | 下から上へ押し出し | 40 | ||
| PUSH BOTTOM / FROM TOP | 上から下へ押し出し | 41 | ||
| PUSH LEFT / PULL RIGHT | 右から左へ畳み交差 | 42 | ||
| PUSH RIGHT / PULL LEFT | 左から右へ畳み交差 | 43 | ||
| PUSH TOP / PULL BOTTOM | 下から上へ畳み交差 | 44 | ||
| PUSH BOTTOM / PULL TOP | 上から下へ畳み交差 | 45 | ||
| FOLD / UNFOLD | FOLD LEFT / FROM RIGHT | 右から左へ立体回転 | 46 | |
| FOLD RIGHT / FROM LEFT | 左から右へ立体回転 | 47 | ||
| FOLD TOP / FROM BOTTOM | 下から上へ立体回転 | 48 | ||
| FOLD BOTTOM / FROM TOP | 上から下へ立体回転 | 49 | ||
| MOVE TO RIGHT / UNFOLD LEFT | 右から左へ立体回転 | 50 | ||
| MOVE TO LEFT / UNFOLD RIGHT | 左から右へ立体回転 | 51 | ||
| MOVE TO BOTTOM / UNFOLD TOP | 下から上へ立体回転 | 52 | ||
| MOVE TO TOP / UNFOLD BOTTOM | 上から下へ立体回転 | 53 | ||
| ROOM | ROOM TO LEFT | 右から左へ立体内側回転 | 54 | |
| ROOM TO RIGHT | 左から右へ立体内側回転 | 55 | ||
| ROOM TO TOP | 下から上へ立体内側回転 | 56 | ||
| ROOM TO BOTTOM | 上から下へ立体内側回転 | 57 | ||
| CUBE | CUBE TO LEFT | 右から左へ3D回転 | 58 | |
| CUBE TO RIGHT | 左から右へ3D回転 | 59 | ||
| CUBE TO TOP | 下から上へ3D回転 | 60 | ||
| CUBE TO BOTTOM | 上から下へ3D回転 | 61 | ||
| CAROUSEL | CAROUSEL TO LEFT | 右から左へ4次元回転 | 62 | |
| CAROUSEL TO RIGHT | 左から右へ4次元回転 | 63 | ||
| CAROUSEL TO TOP | 下から上へ4次元回転 | 64 | ||
| CAROUSEL TO BOTTOM | 上から下へ4次元回転 | 65 | ||
| SIDES | 右から左に扇回転 | 66 | ||
| SLIDE | 右から左にスライド | 67 |
Author Profile
SHARE
