jQuery-TimelineMe

JavaScript

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

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

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

デモ

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

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

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

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

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

jQuery-TimelineMe

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

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

関連記事

  1. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  2. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  3. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  4. no-image

    JavaScript

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

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

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP