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. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  2. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  3. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  4. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  5. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  6. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP