Odyssey.js·地図とテキストをミックスした格好いいコンテンツ MOONGIFT
地図を使ったコンテンツを作るのは楽しいですが、いざ作るとなると意外と難しいのではないでしょうか。Googleマップにマーカーを載せても、それをタップしないと内容が分からなかったりします。 そこで紹介したいのがOdyssey.jsです。地図とコンテンツをミックスした面白いプレゼンテーションを作成できます。 Odyssey.jsの使い方 こちらはエディタになります。地図と、右側に編集できるコンテンツがあります。 Odyssey.jsのコンテンツはMarkdownフォーマットで記述します。ただしcenterやzoomなど特別な気泡も幾つかあります。 左側のカルーセルを移動するとマップもその場所に移動します。 こちらは縦スクロール型。上にある地図は固定で、スクロールすると地図も移動する仕組みです。 こちらはヒートマップ風に線が描かれるデモです。時間軸によって動くのが面白いです。 刻々とアニメーショ
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。 各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
