拡大時のモーションも数種類用意された、多彩なカスタマイズが可能な画像を拡大表示するスクリプト「TopUp」を紹介します。 TopUp examples 拡大できるものは画像やFlash(swf)をはじめ、動画(flv, QuickTime, WindowMedia, RealPlayer)やiframeで別サイトを表示することが可能で、拡大時のモーションや開始終了時にイベントを設定することも可能です。 TopUpの多彩なカスタマイズは、下記のdemoページで試すことができます。
サムネイル画像をドラッグして、大きい画像の表示領域をその動作に合わせてスクロールさせるスクリプトを紹介します。 jQuery Image Scroller Plugin デモページ このスクリプトは作者がPUMAのサイトを構築する際に使用したスクリプトをjQueryのプラグインとして作り直したとのことです。 PUMAで使用されているのは、下記のページです。 <textarea name="code" class="html" cols="60" rows="5"> <div class="image-scroller"> <img src="images/feature.jpg" alt="" class="feature-image" height="1280" width="960" /> <div class="preview"> <img src="images/preview.j
画像ファイルやライブカメラ画像の一部を抽出して、背景や壁紙などに最適な継ぎ目のないシームレスなパターン画像を生成するオンラインサービスを紹介します。 スケールの移動に伴い、パターンも変化 利用方法は登録を必要とせず、簡単です。 サイトにアクセスします。 Repper Lite 画像ファイルをアップロードします。 「1. pickup image」の「upload」をクリックし、画像を指定しアップロードします。画像のフォーマットはJPEG, GIFで、サイズは600px以下のようです。 ライブカメラを使用する場合は「video」をクリックします。 アップロードした画像は「2. create your pattern」に表示されるので、スケールを移動して好みのパターンを生成します。 パターンが決まったら、保存します。 「download pattern」をクリックすると、パターン画像がダウンロ
ナビゲーションのホバーに合わせて、Google Mapsとパネルの表示を切り替えるスクリプトを紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <li data-geo-lat="41.9786" data-geo-long="-87.9047"> <h3>O'Hare Airport</h3> <p>Flights n' stuff</p> <p class="longdesc"><strong>About:</strong> O'Hare International Airport has been voted the "Best Airport in North America" for 10 years by two separate sources: Readers of the U.S. Edition
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
HTML+JavaScript, HTML+swf, Flashで動作する、24種類の多彩な表示方法が揃った画像ギャラリーを紹介します。 HTML slideshows & Flash photo gallery templates _ Slideshow Box ※キャプチャは「24. Wall 3D」 まずは、その24種類の多彩な表示方法を紹介します。 特に目を惹いたのは、9, 12, 20, 22, 24です。
Dragdealer JS デモ スクリプトはjQueryなど他のスクリプトに依存せずに動作し、圧縮版は12KBと軽量なものになっています。 以下に公開されているデモを紹介します。 シンプルなスライダー
ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページ アコーディオンのロジックは下記の通りです。 最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。 クリックをすると。 クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。 「hidden」(閉じた状態)のアイテムをクリックすると、 全てのアイテムから「active」を取り去り、閉じます。 クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。 ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row
画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く