jQuery-TimelineMe

JavaScript

シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

jQuery-TimelineMeは、タイムラインを簡単に構築することのできるjQueryプラグインです。タイムラインは、いまや数多くの場面で見かけますよね。タイムラインといっても、さまざまなタイプがあります。時系列にそってスマートに一覧で表示させたりする典型的なタイプのものから、ユーザーを識別してボックスで表示させ、さらに下層のページへ閲覧を進めるものなどさまざまです。jQuery-TimelineMeは単純にデータ(情報)を一覧で羅列するタイムラインを簡単に作成できるプラグインです。

上から下へ、または左から右への流れを作成できる

デモ

jQuery-TimelineMeの使用方法はとてもシンプル! プラグインのインストール → HTMLへのファイル読み込み → テキストや画像のマークアップ → コンテナとアイテムのオプションの指定、の4行程です。

タイムラインの表示は、ページの上から下への流れと、左から右への流れを作成できます。デフォルトは上から下です。スライドバーの設置も可能なので、ページの任意の範囲内で表示させることができますね。

また、それぞれのタイムラインには初期表示されているテキストや画像以外にもクリックすれば、さらに多くの情報が展開される指定が可能です。その際、エフェクトも指定でき、遊び心を感じるつくりだなぁと感じました!

デモページでは、たくさんのサンプルが紹介されています。コードも記載されているので、気になるものをコピペして自分のサイトへ導入してみましょう。

先ほど述べたように、情報の展開ができるので、タイムラインの初期表示では最小限のテキストや画像で大丈夫です。とてもシンプルなタイムラインのページが作成できると思います。

jQuery-TimelineMe

ToxicBoxさまざまなコンテンツをポップアップウィンドウで表示できる「ToxicBox」前のページ

ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」次のページHolmes

関連記事

  1. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  2. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  3. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  4. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  5. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  6. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

最近の記事

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

アーカイブ

PAGE TOP