javascript・jQuery 「LightBox2」で画像をポップアップ表示するための3ステップ 上のキャプチャのように、画像をエフェクト付きのポップアップで表示したい時、「」という既存のjQueryプラグインを活用するのが最適です。 少ない手間で、高品質なポップアップを実現することができます。 ここでは、プラグインのダウンロードから実際のポップアップ表示までの全手順を紹介していきます。 LightBox2と...
javascript・jQuery コンテンツを横方向に無限スクロールさせる「simplyScroll v2」 「」というjQueryプラグインを使えば、画像やテキストブロックといった要素を横方向にゆっくりとループスライドするスライドショーを作ることができます。 ※2017年5月段階のバージョンでは、横幅可変サイズ指定時に無限スクロールが発生しない(1度のみループスライドして停止する)という不具合を確認しています。 横幅を固定...
javascript・jQuery コンテンツを縦横自在に無限スクロールさせる「infiniteslide.js v2」 画像やテキストといったコンテンツをスライドではなく無限スクロールで表示したい時は、jQueryプラグインの「」が便利です。 ここでは、「infiniteslide」をダウンロードするところから、実際にサイトに適用するまでの一連の流れを紹介していきます。 「infiniteslide」について 「infinitesl...
javascript・jQuery JapanMapで描画した日本地図の表示をレスポンシブで切り替える方法 以下のページで紹介した日本地図描画のカスタマイズとして、 日本地図をレスポンシブで表示切り替えを行う方法を紹介します。 https://rmtmhome.com/html5-canvas-japanmap-423 描画用javascriptプログラムを記述する javascriptのプログラムを記述します。 ja...
javascript・jQuery JapanMapで描画した日本地図にページリンクを追加する方法 以下のページで紹介した日本地図描画のカスタマイズとして、 日本地図をクリックした際にページリンクのイベントを追加する方法を紹介します。 https://rmtmhome.com/html5-canvas-japanmap-423 描画用javascriptプログラムを記述する javascriptのプログラムを記述...
javascript・jQuery JapanMapを使った一部のみ有効な日本地図の動的描画を行う方法 以下のページで紹介した日本地図描画のカスタマイズとして、 上図のような一部のエリアのみ有効な日本地図を描画する方法を紹介します。 https://rmtmhome.com/html5-canvas-japanmap-423 描画用javascriptプログラムを記述する javascriptのプログラムを記述します...
javascript・jQuery JapanMapを使った地方名付き日本地図の動的描画を行う方法 以下のページで紹介した日本地図描画のカスタマイズとして、 上図のような地方名付きの日本地図を描画する方法を紹介します。 https://rmtmhome.com/html5-canvas-japanmap-423 描画用javascriptプログラムを記述する javascriptのプログラムを記述します。 ここ...
javascript・jQuery JapanMapを使った県名付き日本地図の動的描画を行う方法 以下のページで紹介した日本地図描画のカスタマイズとして、 上図のような県名付きの日本地図を描画する方法を紹介します。 https://rmtmhome.com/html5-canvas-japanmap-423 描画用javascriptプログラムを記述する javascriptのプログラムを記述します。 ここで...
javascript・jQuery canvasでjQueryプラグインJapanMapを使った日本地図の動的描画を行う方法 WEBサイトを構築していて、上図のような日本地図を描画したい時があります。 画像で作ると、 仕上がりが荒くなったてしまったり、 ホバーで色を変えるのに何枚も画像を作らなければならなかったり、 色や座標の変更が非常に面倒です。 そんな時におすすめなのが、HTML5がサポートしているcanvasを使った方法です。 ...
javascript・jQuery sp-slidemenu.jsを使ったカスタムスライドインメニューの実装 以下のページでは、 左右からスライドインするメニューの実装方法を紹介してきました。 https://rmtmhome.com/sp-slidemenu-36 ここでは、これをさらにカスタマイズして、 上キャプチャのようなデザインのカスタムスライドインメニューを作る方法を紹介します。 スライドインメニューのプログラ...