Webページやスマホアプリにパノラマ画像のコンテンツを簡単に実装できる軽量スクリプト -Panolens.js
360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。 パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。 Panolens.js Panolens.js -GitHub Panolens.jsの特徴 Panolens.jsのデモ Panolens.jsの使い方 Panolens.jsの特徴 Panolens.jsはイベント駆動型で、WebGL対応のパノラマビューアーです。 パノラマは水平方向をはじめ、垂直方向・拡大縮小にも対応しています。 Three.JS（3Dフレームワーク）をベースに実装された軽量のスクリプトで、カスタマイズも優れています。 Panolens.jsのデモ デモではPanolens.jsで実装されたさまざまなパノラマを楽しめます。
Splitter - 縦横自在にコンテンツ領域を変更
情報の見せ方はなるべく提供側でコントロールしたいと思うものですが、そもそもWebの場合はデバイスの画面幅が異なったりして一様とはいきません。むしろユーザがコントロールできるようにした方がユーザビリティが高いとさえ言えるでしょう。 そこで使ってみたいのがSplitterです。グリッド内に表示されるコンテンツの幅や高さを自由に変えられるようにするライブラリです。 Splitterの使い方 一番シンプルなデモ。マウスで幅を変えられます。 ドラッグ中に視覚情報を追加するデモ。 縦横どちらも自由に設定できます。 Splitterは昔懐かしいframeタグで自由に幅が変更できる仕組みに似ています。特に業務システムであったり、Webアプリケーションで使うと便利そうです。なおブラウザはIE8から対応しています。 SplitterはJavaScript製のソフトウェア（ソースコードは公開されていますがライセ
Smoothslides - ケン・バーンズ効果を使ったカルーセル MOONGIFT
最近はWebサイトにカルーセルを載せて写真をスライド表示するのを多く見かけるようになりました。大抵右から左に写真が流れていくものが多いのですが、あまり多いと見飽きてしまいます。これではせっかくの写真が印象に残りません。 より写真を強調したカルーセルを考えるならばSmoothslidesを使ってみても面白そうです。 Smoothslidesの使い方 Smoothslidesを使うと写真が単に表示されるだけでなく、上下左右にゆっくりと動きます。写真がより印象深くなるのではないでしょうか。 これはケン・バーンズ効果と呼ばれ、静止画に動きと生命を与える手法として知られています。AppleのiPhoto、iMovieなどでも実装されているものになります。写真を楽しむ上で欠かせないテクニックと言えそうです。 SmoothslidesはJavaScript製、Creative Commonsのオープンソ
[JS]並べて配置したパネルを滑らかなアニメーションで伸縮させるスクリプト -Kwicks for jQuery
水平・垂直に配置したパネルをイージングやバウンドなどの滑らかなアニメーションで伸縮させるjQueryのプラグインを紹介します。 Kwicks for jQuery Kwicksは元来、MooToolsのエフェクトでしたがjQuery用にし、アニメーションのスムーズさ、コントロール、イベントのインタラクションなどを改善するために今回ゼロからリライトされました。 Kwicksのデモ Kwicksの使い方 Kwicksのデモ デモでは6種類のKwicksの動作を楽しめます。 対応ブラウザは、IE7+, Firefox3.6+, Chrome12+, Safri5+, Opera11+です。
CSSでブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法
ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。 動作は主要ブラウザ（IE/FF/Chrome/Safari/Opera）の現時点での最新版で確認しています。 動作確認は以下のサンプルをご利用ください。 サンプル １．ウィンドウの高さに合わせて画像を拡大・縮小する ウィンドウの高さにあわせて画像を拡大・縮小するには、次のようにします。 HTML <div id="box"> <img src="画像のURL" alt="coffee" /> </div> CSS #box { height: 20%; } #box img { height: 100%; } img要素を括ったdiv要素にheightプロパティを設定し、画像の高さを%で指定します。また、img要素に「height:100%」を設定します。 ２．ウィンドウの幅に合わせ
jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法
拡大画像を表示するJavaScriptライブラリ「jQuery lightBoxプラグイン」で、拡大画像の幅・高さを制限する方法を紹介します。 jQuery lightBoxプラグインの使い方は、下記の公式サイトやネットの情報をご覧ください。 jQuery lightBox plugin １．問題点 jQuery lightBoxプラグインは元画像である拡大画像の表示サイズを設定できないため、元画像のサイズによっては次のように期待通りの表示にならないケースがあります。 対処前の拡大画像（ブラウザの幅を超えて拡大） 本エントリーの対処を行うことで、拡大時のサイズを制限することができるようになります。 対処後の拡大画像 ２．jquery.lightbox-0.5.jsの修正 jQuery lightBoxプラグインに含まれる、jquery.lightbox-0.5.jsを任意のエディタで開き、
画像の縦横比を固定して縮小する方法。 « wondering-mug
26 5月 2011 - by cat_anywhere Jqueryを使って、画像の縦横比を固定したい時に、便利なスクリプトです。 簡単なイベントハンドラと、if構文を使えば、数行のスクリプトで実現できます。 HTMLの例 <table> <tbody> <tr> <td><img id="imgtf" src="photo1.jpg" alt="" /></td> <td><img id="imgtf" src="photo2.jpg" alt="" /></td> <td><img id="imgtf" src="photo3.jpg" alt="" /></td> <td><img id="imgtf" src="photo4.jpg" alt="" /></td> <td><img id="imgtf" src="photo5.jpg" alt="" /></td> </tr>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
