Cycle

アニメーション切替のスライドショーを作るなら、jQuery の Cycle プラグインが便利。

様々なアニメーション動作の切替をサポートしている。オプションも豊富で、スライドショー以外にも応用できる。

  • jQuery Cycle Plugin

    jQuery の Cycle プラグインについて。jQuery の Cycle プラグインを使うと、様々なアニメーション動作によるスライドショーを、簡単に作れる。オプションも豊富にあり、細部までカスタマイズできるので、スライドショー以外にも応用できる。

  • jQuery の Cycle プラグインで作る基本的スライドショー

    jQuery の Cycle プラグインで作るスライドショーにおいて、オプションを使わない、超基本的スライドショー。

  • jQuery の Cycle で、フェードイン・フェードアウト切替のスライドショー

    jQuery の Cycle プラグインを使い、フェードイン、フェードアウトのアニメーションで切り替えるスライドショーを作る方法。

  • jQuery の Cycle で、フェードアウト＆ズーム表示切替のスライドショー

    jQuery の Cycle プラグインを使い、表示中のスライドをフェードアウトで消し、次のスライドを拡大（ズーム）しながら表示するアニメーションで切り替えるスライドショーを作る方法。フェードアウト＆ズーム表示アニメーションで切り替えるようにするには、fx オプションに「fadeZoom」を指定する。

  • jQuery の Cycle で、縦にカーテンを閉じる様な切替のスライドショー

    jQuery の Cycle プラグインを使い、垂直方向にカーテンを閉じるようなアニメーションで切り替えるスライドショーを作る方法。垂直方向にカーテンを閉じるようなアニメーションで切り替えるようにするには、fx オプションに「curtainY」を指定する。

  • jQuery の Cycle で、横にカーテンを閉じる様な切替のスライドショー

    jQuery の Cycle プラグインを使い、水平方向にカーテンを閉じるようなアニメーションで切り替えるスライドショーを作る方法。水平方向にカーテンを閉じるようなアニメーションで切り替えるようにするには、fx オプションに「curtainX」を指定する。

  • jQuery の Cycle で、上から下へのスクロール切替のスライドショー

    jQuery の Cycle プラグインを使い、上から下へスクロールするアニメーションで切り替わるスライドショーを作る方法。上から下へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollDown」を指定する。

  • jQuery の Cycle で、下から上へのスクロール切替のスライドショー

    jQuery の Cycle プラグインを使い、下から上へスクロールするアニメーションで切り替わるスライドショーを作る方法。下から上へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollUp」を指定する。

  • jQuery の Cycle で、右から左へのスクロール切替のスライドショー

    jQuery の Cycle プラグインを使い、右から左へスクロールするアニメーションで切り替わるスライドショーを作る方法。右から左へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollLeft」を指定する。

  • jQuery の Cycle で、左から右へのスクロール切替のスライドショー

    jQuery の Cycle プラグインを使い、左から右へスクロールするアニメーションで切り替わるスライドショーを作る方法。左から右へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollRight」を指定する。

  • jQuery の Cycle で、右から左へのスクロール切替のスライドショー②

    jQuery の Cycle プラグインを使い、右から左へスクロールするアニメーションで切り替わるスライドショーを作る方法。右から左へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollHorz」か「scrollLeft」を指定する。

  • jQuery の Cycle で、上から下へのスクロール切替のスライドショー②

    jQuery の Cycle プラグインを使い、上から下へスクロールするアニメーションで切り替わるスライドショーを作る方法。上から下へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollVert」か「scrollDown」を指定する。

  • jQuery の Cycle で、中央から左右へ拡がる切替のスライドショー

    jQuery の Cycle プラグインを使い、中央から左右へ拡がるアニメーションで切り替わるスライドショーを作る方法。中央から左右へ拡がるアニメーションで切り替えるようにするには、fx オプションに「growX」を指定する。

  • jQuery の Cycle で、中央から上下へ拡がる切替のスライドショー

    jQuery の Cycle プラグインを使い、中央から上下へ拡がるアニメーションで切り替わるスライドショーを作る方法。中央から上下へ拡がるアニメーションで切り替えるようにするには、fx オプションに「growY」を指定する。

  • jQuery の Cycle プラグインで、右から現れ右へ消えるスライドショー

    jQuery の Cycle プラグインを使い、右から現れ右へ消えるアニメーションで切り替わるスライドショーを作る方法。右から現れ右へ消えるアニメーションで切り替えるようにするには、fx オプションに「blindX」を指定する。

  • jQuery の Cycle プラグインで、下から現れ下へ消えるスライドショー

    jQuery の Cycle プラグインを使い、下から現れ下へ消えるアニメーションで切り替わるスライドショーを作る方法。下から現れ下へ消えるアニメーションで切り替えるようにするには、fx オプションに「blindY」を指定する。

  • jQuery の Cycle で、右下から現れ右下へ消えるスライドショー

    jQuery の Cycle プラグインを使い、右下から現れ右下へ消えるアニメーションで切り替わるスライドショーを作る方法。右下から現れ右下へ消えるアニメーションで切り替えるようにするには、fx オプションに「blindZ」を指定する。

  • jQuery の Cycle で、覆いかぶさるように右から現れるスライドショー

    jQuery の Cycle プラグインを使い、表示中のスライドに覆いかぶさるように、次のスライドが右から現れるアニメーションで切り替わるスライドショーを作る方法。表示中のスライドに覆いかぶさるように、次のスライドが右から現れるアニメーションで切り替えるようにするには、fx オプションに「cover」を指定する。

  • jQuery の Cycle で、カードを切り混ぜるアニメーションのスライドショー

    jQuery の Cycle プラグインを使い、トランプでカードを切り混ぜるようにシャッフルするアニメーションで切り替わるスライドショーを作る方法。トランプでカードを切り混ぜるようにシャッフルするアニメーションで切り替えるようにするには、fx オプションに「shuffle」を指定する。

  • jQuery の Cycle で、スライドで左から現れ左へ消えるスライドショー

    jQuery の Cycle プラグインを使い、左からスライドで現れ、左へスライドで消えるアニメーションで切り替わるスライドショーを作る方法。左からスライドで現れ、左へスライドで消えるアニメーションで切り替えるようにするには、fx オプションに「slideX」を指定する。

  • jQuery の Cycle で、スライドで上から現れ上へ消えるスライドショー

    jQuery の Cycle プラグインを使い、上からスライドで現れ、上へスライドで消えるアニメーションで切り替わるスライドショーを作る方法。上からスライドで現れ、上へスライドで消えるアニメーションで切り替えるようにするには、fx オプションに「slideY」を指定する。

  • jQuery の Cycle で、右上へ投げるような切替のスライドショー

    jQuery の Cycle プラグインを使い、右上へ投げるようなアニメーションで切り替わるスライドショーを作る方法。右上へ投げるようなアニメーションで切り替えるようにするには、fx オプションに「toss」を指定する。

  • jQuery の Cycle で、上へ向かって裏返す切替のスライドショー

    jQuery の Cycle プラグインを使い、上へ向かって裏返すようなアニメーションで切り替わるスライドショーを作る方法。上へ向かって裏返すようなアニメーションで切り替えるようにするには、fx オプションに「turnUp」を指定する。

  • jQuery の Cycle で、下へ向かって裏返す切替のスライドショー

    jQuery の Cycle プラグインを使い、下へ向かって裏返すようなアニメーションで切り替わるスライドショーを作る方法。下へ向かって裏返すようなアニメーションで切り替えるようにするには、fx オプションに「turnDown」を指定する。

  • jQuery の Cycle で、左へ向かって裏返す切替のスライドショー

    jQuery の Cycle プラグインを使い、左へ向かって裏返すようなアニメーションで切り替わるスライドショーを作る方法。左へ向かって裏返すようなアニメーションで切り替えるようにするには、fx オプションに「turnLeft」を指定する。

  • jQuery の Cycle で、右へ向かって裏返す切替のスライドショー

    jQuery の Cycle プラグインを使い、右へ向かって裏返すようなアニメーションで切り替わるスライドショーを作る方法。右へ向かって裏返すようなアニメーションで切り替えるようにするには、fx オプションに「turnRight」を指定する。

  • jQuery の Cycle で、左へ消えると背後から現れる切替のスライドショー

    jQuery の Cycle プラグインを使い、表示中の画像が左へ向かいスライドしながら消えると、背後の次の画像が現れるアニメーションで切り替わるスライドショーを作る方法。左へ消えると背後から現れるアニメーションで切り替えるようにするには、fx オプションに「uncover」を指定する。

  • jQuery の Cycle で、左上から右下へ拭うような切替のスライドショー

    jQuery の Cycle プラグインを使い、左上から右下へ向かって拭うようなアニメーションで切り替わるスライドショーを作る方法。左上から右下へ向かって拭うようなアニメーションで切り替えるようにするには、fx オプションに「wipe」を指定する。

  • jQuery の Cycle で、縮小/拡大アニメーション切替のスライドショー

    jQuery の Cycle プラグインを使い、縮小/拡大アニメーションで切り替わるスライドショーを作る方法。縮小/拡大アニメーションで切り替えるようにするには、fx オプションに「zoom」を指定する。

  • jQuery の Cycle で、切替アニメーションなしのスライドショー

    jQuery の Cycle プラグインを使い、切替アニメーションなしで切り替わるスライドショーを作る方法。切替アニメーションなしで切り替えるようにするには、fx オプションに「none」を指定する。

  • jQuery の Cycle で、方向を指定したシャッフル切替のスライドショー

    jQuery の Cycle プラグインを使い、トランプでカードを切り混ぜるようにシャッフルするアニメーションで切り替わるスライドショーにおいて、シャッフルするアニメーションの方向を指定する方法。シャッフルするアニメーションの方向を指定するには、shuffle オプションを使う。

  • JQuery Cycle Plugin と jQuery Easing Plugin の併用

    jQuery の Cycle プラグインを使い、トランプでカードを切り混ぜるようにシャッフルするアニメーション切替のスライドショーにおいて、アニメーションの動き方を Easing プラグインの「easeInOutBack」にする方法。Easing プラグインの動き方を取り入れるには、easing オプションを使う。

  • JQuery Cycle Plugin と jQuery Easing Plugin の併用②

    jQuery の Cycle プラグインを使い、上から下へスクロールするアニメーションで切り替わるスライドショーにおいて、アニメーションの動き方を Easing プラグインの「easeOutBounce」にする方法。アニメーションに Easing プラグインの動き方を取り入れるには、easing オプションを使う。

  • jQuery の Cycle で、スライドをクリックすると切り替わるスライドショー

    jQuery の Cycle プラグインを使い、スライド画像をクリックすると、右上へ投げるようなアニメーションで、次のスライド画像へ切り替わるスライドショーを作る方法。スライド画像をクリックすることで切り替わるようにするには、next オプションを使う。

  • jQuery の Cycle で、次にも前にも切り替えられるスライドショー

    jQuery の Cycle プラグインを使い、フェードイン・フェードアウトのアニメーションで切り替わるスライドショーにおいて、次のスライド画像にも前のスライド画像にも切り替えられるようにする方法。次のスライド画像にも前のスライド画像にも切り替えられるようにするには、next オプションと prev オプションを使う。

  • jQuery の Cycle による、手動でも自動でも切り替わるスライドショー

    jQuery の Cycle プラグインを使った、右上へ投げるようなアニメーションで次のスライド画像へ切り替わるスライドショーにおいて、手動（スライド画像をクリック）でも自動でも切り替わるようにする方法。手動（スライド画像をクリック）でも切り替わるようにするには、next オプションを使う。

  • jQuery の Cycle で、ページ番号で切り替えるスライドショー

    jQuery の Cycle プラグインを使い、フェードイン・フェードアウトのアニメーションで切り替わるスライドショーにおいて、スライド画像をページ分けし、ページ番号で切り替えられるようにする方法。スライド画像をページ分けし、ページ番号で切り替えられるようにするには、pager オプションを使う。

  • jQuery の Cycle プラグインを使った、ランダム順スライドショー

    jQuery の Cycle プラグインを使い、フェードイン・フェードアウトのアニメーションで切り替わるスライドショーにおいて、順番をランダムにする方法。順番をランダムにするには、random オプションを使う。フェードイン・フェードアウトのアニメーションで切り替えるには、fx オプションに「fade」を指定する。

  • jQuery の Cycle プラグインによる、一時停止できるスライドショー

    jQuery の Cycle プラグインを使い、フェードイン・フェードアウトのアニメーションで切り替わるスライドショーにおいて、スライドショーを一時停止できるようにする方法。スライドショーを一時停止できるようにするには、toggle コマンドを使う。

  • jQuery の Cycle のスライドショーで切替の前後に関数を呼び出す

    jQuery の Cycle プラグインを使った、左上から右下へ向かって拭うようなアニメーションで切り替わるスライドショーにおいて、スライド切替アニメーション中とスライド表示中に表示するテキストを指定する方法。before オプションとafter オプションで、切替アニメーション前後にテキストを表示する関数を呼び出す。

  • jQuery の Cycle で、前後手動切替の水平スクロール・スライドショー

    jQuery の Cycle プラグインを使い、水平方向（左右）へスクロールするアニメーションで切り替わるスライドショーにおいて、リンク要素をクリックすることで、次のスライド画像にも、前のスライド画像にも、切り替えられるようにする方法。次のスライド画像にも、前のスライド画像にも、切り替えられるようにするには、next オプションと prev オプションを使う。

  • スライド上の左右をクリックし前後のスライドへ切り替えるスライドショー

    jQuery の Cycle プラグインを使い、水平方向（左右）へスクロールするアニメーションで切り替わるスライドショーにおいて、スライド画像の右側をクリックすると、次のスライド画像へ切り替わり、スライド画像の左側をクリックすると、前のスライド画像へ切り替わるようにする方法。

  • jQuery の Cycle で画像でないスライドのスクロール切替スライドショー

    jQuery の Cycle プラグインを使い、右から左へスクロールするアニメーションで切り替わるスライドショーにおいて、スライドに画像でない要素を使用するサンプル。右から左へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollLeft」を指定する。

  • jQuery の Cycle で、右上から現れて右下へ消えるスライドショー

    jQuery の Cycle プラグインを使い、右上から現れて右下へ消えるアニメーションで切り替わるスライドショーを作る方法。右上から現れて右下へ消えるアニメーションで切り替えるようにするには、「fx」オプションに「custom」を指定し、さらに「cssBefore」「animIn」「animOut」オプションを使う。

スポンサード リンク