Timeline

JavaScript

水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

Timelineは水平・垂直に対応したVanilla JSを使ったタイムラインを実装できます。レスポンシブにも対応しているのでモバイルからの閲覧もバッチリですね。自サイトのレイアウトなどに合わせて水平か垂直のどちらかを選べるのはとても便利です。

Timeline

デモ

デモでは水平と垂直の両方のタイムラインが用意されています。水平のタイムラインでは、PCからの閲覧の場合、左右の矢印ボタンが設置されていて、ここから前後に移動することが可能です。

スマホのように画面幅が狭くなると、縦にタイムラインが一列で並んだレイアウトに変化します。レスポンシブ対応により、PC・モバイルともにそのデバイスに最適なカタチで表示されるのがいいですね。

ちなみに水平・垂直の設定は、オプションの「mode」から指定することができます。デフォルト値はverticalです。水平にしたい場合はここの値をhorizontalに指定すればOKです。

オプションには他にも、forceVerticalMode、horizontalStartPosition、moveItems、startIndex、verticalStartPosition、verticalTrigger、visibleItemsといった項目が用意されています。

マークアップもシンプルで記述しやすく、ファイルサイズも小さいのでモバイルにもピッタリですね。というわけで、水平・垂直に対応したレスポンシブなタイムラインを実装できる「Timeline」の紹介でした。

Timeline

jQuery Inline Footnotesホバーで脚注を表示できる「jQuery Inline Footnotes」前のページ

マウスの動きに連動するテキストシャドウ「Direction-aware text-shadow」次のページno-image

関連記事

  1. mmenu

    JavaScript

    スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」

    mmenuというjQueryプラグインを使えば、スマホアプリのように横…

  2. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  3. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

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

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  5. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  6. jQuery Section Navi Plugin

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP