jQuery-TimelineMe

JavaScript

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

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

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

デモ

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

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

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

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

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

jQuery-TimelineMe

関連記事

  1. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  2. jQuery Panorama Viewer

    JavaScript

    パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

    jQuery Panorama Viewerはパノラマビューを実装する…

  3. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  4. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  5. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  6. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP