Timeline

JavaScript

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

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

Timeline

デモ

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

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

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

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

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

Timeline

関連記事

  1. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  2. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  3. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  4. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  5. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

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

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP