Spry WigetsのSliding Panels Widgetを使う

Sliding Panelsはニュースティッカーなどのスペースの狭いレイアウト部分やフォトスライドショーなどに使われます。
今回使用したのはSpry1.6。
解凍したフォルダのwidgetsslidingpanelsSprySlidingPanels.htmlをみるとシンプルな例で分かりやすい。

ややこしいが「Sliding Panels Widget」と「Effecs Slide」とは別物のようです。
WigetのほうがSprySlidingPanels.jsを使い、EffecsのSlideはSpryEffect.jsを使う。
Sliding Panels Sample: Sliding Panels Widgetのサンプル

  • Vertical Sliding:垂直移動
  • Horizontal Sliding:CSSの設定で水平移動する
  • Sliding in Both Dimensions:CSSの設定で水平垂直移動する
  • Keyboard Navigation:キーボードでのナビゲーション
  • Turning Off Animation:アニメーションを切る
  • Fine Tuning the Panel Animation:設定できるパラメータ
    [js]

    var sp6 = new Spry.Widget.SlidingPanels(‘example6’, { duration: 250, fps: 90 });

    [/js]

  • Specifying the Default Panel:最初に見せたいパネル番号
    [js]

    var sp7 = new Spry.Widget.SlidingPanels(‘example7’, { defaultPanel: 3 });

    [/js]

参考:

ちなみにEffectsのSlide Effectはざっくり下記のとおり。
Spry Slide Effect Samples:Effectsのサンプル

  • Toggle:トグル
  • Slide Horizontal:水平にスライド
  • Duration and Sizing:アニメーション完了までの時間と移動距離
  • Initially hidden element:display:noneで隠すのではなくformタグでhtmlページを読み込んでからエフェクトを開始。
  • Setup and Finish functions:効果の開始時と終了時に行動を設定
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中