Blog

67種類ものエフェクトが使えるjQueryプラグイン PAGE TRANSITIONS

2013.07.16Cat:jQuery 役員

66種類ものスライドが使えるjQueryプラグイン

PAGE TRANSITIONSをつかってみた。

http://tympanus.net/Development/PageTransitions/

 

非常にクオリティの高いエフェクトが揃っており、

様々なオブジェクトに対して利用できるため、これだけ使ってれば良いのではと思えた。

 

設置方法は

このように、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

hoshino

ECのことを中心に書きたいと思います。
ネタが無いときはプログラムやデザインのことも書きます。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ