Jquery-Slider

JavaScript

水平の画像タイムラインを実装できる「Jquery-Slider」

Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴です。年ごとにシンプルな水平タイムラインを表示したいという人にはピッタリですね。任意の年をクリックすると、そのポイントまでスライドで移動します。

Jquery-Slider

デモ

デモでは水平に並ばられた画像によるタイムラインが用意されています。画面の下には年表があり、ここから見たい年をクリックすると、その場所までスライド移動します。年表では移動するだけではなく、現在表示されている位置も確認できるのでとても便利ですね。

画像・年表ともに横一列に並べられているのでとても見やすくなっています。時系列にタイムラインをシンプルに設置したい場合には最適なタイムラインになるのではないでしょうか?

オプションには、items、frequency、intermediate、init_sections、snap、label、sections、bar、bubble、decimal_placesといった項目が用意されています。各オプションのデフォルト値は、frequencyが0、intermediateが!0、init_sectionsが0、snapが!0、sectionsがtrue、barがfalse、bubbleがfalse、decimal_placesが2です。

Jquery-Slider

関連記事

  1. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  2. no-image
  3. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  5. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  6. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP