年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15

  • Posted on
  • Category : Tips
年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15

年表・沿革・コメント一覧といったコンテンツで用いられているタイムラインデザインを作成する際に便利なプラグインやチュートリアルのまとめです。レスポンシブ対応したものやCSSだけで実装したものなど全15種類で、見た目もよく見かける縦型(垂直)タイプだけでなく横型(水平)で見せるタイプもあります。

jQuery Timelinr

jQuery Timelinr

縦型・横型の両タイプが用意されているjQueryプラグインで、スライダーのような見栄えでタイムラインを実装できます。
スライドのオート機能や各アニメーション速度の設定、「prev」「next」のナビ機能などの設定もいろいろと用意されています。

Dynamic Timeline

Dynamic Timeline

レスポンシブ対応もされているjQueryプラグインで、こちらも縦型・横型の両タイプが用意されており、ビューサイズ指定で通常は横型のものをスマートフォンでは縦型に見せるなども可能です。
他にもコンテンツを繋ぐラインのフェード表示やアニメーション速度の指定といったオプションが用意されています。

Timeline JS

Timeline JS

ダイナミックな横型のタイムラインを実装できるプラグイン。
見栄えが大きく異なっているわけではありませんが、デモだけでなく実際に公開されているサイトのショーケースも掲載されているので、どのような形でこのプラグインが導入されているのか参考にすることができます。

Timeline Portfolio

Timeline Portfolio

上記の「Timeline JS」をCSS3などと組み合わせて使用し、ポートフォリオコンテンツを実装してみるというチュートリアルで、実際のファイルをダウンロードすることもできます。

B1nj Timeline

B1nj Timeline

シンプルな縦型タイムラインを実装できるjQueryプラグイン。

Vertical Timeline

Vertical Timeline

CSS3とjQueryを使用してレスポンシブな縦型タイムラインを実装するチュートリアルで、スクロールしていくとコンテンツが左右からフェードインしてくるアニメーションが付いています。

Lateral On-Scroll Sliding with jQuery

Lateral On-Scroll Sliding with jQuery

同じくスクロールされるごとに左右からコンテンツが見えてくるタイプの縦型タイムラインを実装するチュートリアル。
こちらはアニメーションはなく、スクロールによって左右から中央に向かって徐々にコンテンツが移動してくるようなものです。

CSS and jQuery Icons Filling Effect

CSS and jQuery Icons Filling Effect

レスポンシブ対応されている縦型タイムラインを実装するチュートリアル。
スクロールしていくとアイコンが着色されていくような見栄えを実装することができます。

Vertical Timeline

Vertical Timeline

CSSのみを使用し、レスポンシブ対応もされているシンプルな縦型タイムラインを実装するチュートリアル。

Responsive CSS Timeline with 3D Effect

Responsive CSS Timeline with 3D Effect

同じくCSSのみを使用してレスポンシブ対応もされた縦型タイムラインを実装するチュートリアル。
デモでアバター横のアイコンをクリックすると詳細が表示されるのですが、表示する際の3DエフェクトのアニメーションもCSSを用いて実装しています。

CSS3 Timeline

CSS3 Timeline

CSSだけで実装するレスポンシブ対応のシンプルな縦型タイムラインで、各見出しをクリックすると詳細が表示されるようになっています。

Responsive HTML Timeline

Responsive HTML Timeline

同じくシンプルな縦型タイムラインで、こちらも同じく簡単にレスポンシブ対応もされています。

timeline with css

timeline with css

同じようなコンテンツが並べられているだけでなく、途中で目立たせたい違うサイズのコンテンツを並べるのにも対応した縦型タイムラインで、left・right・highlightの3つのクラスをそれぞれ指定するだけで簡単に見た目を指定できます。

CSS3 Horizontal Timeline

CSS3 Horizontal Timeline

詳細表示の際にアニメーションが特徴的な横型タイムライン。
ただ、ウィンドウサイズが小さい時には向いていないので調整が必要です。

Pure CSS Timeline

Pure CSS Timeline

CSSのみで実装するシンプルな横型タイムライン。

おまけ

Pens tagged ‘timeline’ on CodePen

Pens tagged 'timeline' on CodePen

上でも幾つか紹介していますが、CodePenの「timeline」タグでもタイムラインの実装サンプルを沢山見ることができます。
ご存知の方も多いとは思いますが、CodePenではクリエイティブなものから面白いものまで様々なテクニックが投稿されているので、検索などでなかなか参考になるものが見つからないなと思うときは、こういったサイトで探してみると目的の動きに近いものだったり、全然違うものだけどインスピレーションをもらえたりするなんてこともあるのでおすすめです。

Back to Top

年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15

年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。