TimelineJS 用時間來說故事

網站:http://timeline.knightlab.com/

只需一個Google試算表及四個步驟就可以製作一個以時間來說故事的腳本。
TimelineJS是以時間軸為主軸,讓我們可以設計在某些時間點上發生的故事,
例如:2006年結婚、2007年寶寶出生、2008年買房子等事件。

因為需要使用Google試算表,所以我們必須要有一個Google的帳號,
這部份直接到Google就可以申請一個免費的帳號。

步驟的第一步是開啟Google試算表的範本如下圖按下「Google Spreadsheet Template ],

登入Google後,就會開啟試算表,試算表的第一行每個欄位都是都意義,不能隨意更改名稱及位置,
但是第二行開始就是我們的故事設計的地方,把事件發生的日期、原由、備註等,
輸入相對應的欄位,每一行就是一個事件。

完成試算表的設計之後,要把試算表發佈到網路上如下圖:


試算表發佈完成之後,在「連結」的頁面上會有一串網址,把它複製下來。

回到TimelineJS的網頁上,在第三個步驟的「Google」貼上剛剛複製的網址。
下面還有其他的選項可以選擇,依自己的需求選擇就行,也可以全部依照預設值。

最後的第四個步驟就是把方框內的iframe語法複製起來,貼到我們自己網頁的HTML上就可以了。

這是預設範本製作出來的故事截圖