Odyssey.js·地図とテキストをミックスした格好いいコンテンツ MOONGIFT
地図を使ったコンテンツを作るのは楽しいですが、いざ作るとなると意外と難しいのではないでしょうか。Googleマップにマーカーを載せても、それをタップしないと内容が分からなかったりします。 そこで紹介したいのがOdyssey.jsです。地図とコンテンツをミックスした面白いプレゼンテーションを作成できます。 Odyssey.jsの使い方 こちらはエディタになります。地図と、右側に編集できるコンテンツがあります。 Odyssey.jsのコンテンツはMarkdownフォーマットで記述します。ただしcenterやzoomなど特別な気泡も幾つかあります。 左側のカルーセルを移動するとマップもその場所に移動します。 こちらは縦スクロール型。上にある地図は固定で、スクロールすると地図も移動する仕組みです。 こちらはヒートマップ風に線が描かれるデモです。時間軸によって動くのが面白いです。 刻々とアニメーショ
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
