[JS]リスト要素を簡単にアコーディオンにするスクリプト -Flexible Accordion
リストで実装された箇所をアニメーションで開閉するアコーディオンにするスクリプトをJoomlationから紹介します。 Flexible Accordion demo 「Flexible」とあるだけあって、高さが異なるリストや多用な要素が配置されたリストでも、アコーディオンのヘッダとコンテンツ箇所を指定しスクリプトを記述すると、アニメーションで開閉するアコーディオンに変更できます。 アコーディオンのヘッダには「class="accHeader"」、コンテンツには「class="accContent"」を指定します。 Flexible AccordionはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[JS]ドリルダウンやフライアウトなど、アニメーションのエフェクトを持つナビゲーションのスクリプト -fg.menu
iPod風のドリルダウン型、飛び出すエフェクトのフライアウト型、シンプルなドロップダウン型など、アニメーションのエフェクトを持ったナビゲーションのスクリプトをfilament groupから紹介します。 Dropdown, iPod Drilldown, and Flyout styles demo: drilldown 上記のデモでは、クリックした項目のパネルが次々にスライドするドリルダウン型のナビゲーションで、上部にはパンくずが実装されています。 パンくず機能の代わりに、戻る機能の「Back」ボタンが実装されているものもあります。
[JS]ダイナミックな動きでフィルタリングを行うスクリプト -Filtering Blocks
Eコマースサイトなどに便利そうな、スライドのアニメーションでフィルタリングを行い、特定の属性のパネル（div要素）のみを表示するスクリプトをCSS-Tricksから紹介します。 Filtering Blocks demo デモでは、ナビゲーションに「View All」と属性4つがあり、それぞれの属性をクリックすると、指定属性のパネルのみをアニメーションで表示します。 「View All」は全部表示です。 仕組みは、ナビゲーション（id）とパネル（class）での指定を元にフィルタリングをしています。 ナビゲーション（例：webonly） <textarea name="code" class="html" cols="60" rows="5"> <a href="#" id="webonly" class="filter">Web Only</a> </textarea>
訪問者驚きの手めくり風、画像ギャラリー作成サンプル:phpspot開発日誌
Create a unique Gallery by using z-index and jQuery | This Blog Use jQuery 訪問者驚きの手めくり風、画像ギャラリーを作成できるサンプル。 以下がデモで、実際に試してみましょう。驚きの効果が得られるはずです。 HTML定義部分。分かりやすいコードも魅力です。 <!-- relevant for the tutorial - start --> <div class="grid_6 prefix_1 suffix_1" id="gallery"> <div id="pictures"> <!--画像の定義部分--> <img src="images/picture1.png" alt="" /> <img src="images/picture2.png" alt="" /> <img src="images/pictu
いま一番美しい、JavaScriptが効果的な新サイト
FlashからJavaScriptへ――。ソニーグループのコーポレートサイトがJavaScriptを使って全面リニューアルされるなど（関連記事）、JavaScriptの勢いが感じられた。そんな2008年の年末にまた1つ、注目のWebサイトが国内で誕生していた。「榊田倫之建築設計事務所」のコーポレートサイト（http://www.sakakida.com/）だ。 細かな黒のチェック模様の上に浮かぶ、白いレクタングル。細いサンセリフのフォントで綴られた英文の会社名に、小さなテキストで示されたメニュー。そんなシンプルな榊田倫之建築設計事務所のWebサイトは、無駄な要素を極力削ぎ落とした“最小限”のデザインが印象的なサイト。今年2月に発表された「第4回JWDA WEBデザインアワード」（主催：日本WEBデザイナーズ協会）では、奨励賞に選ばれた。 このサイトの主役は、同サイトのオーナーである建築家・
JavaScriptでマウスポインタ位置に目玉がついてくるxEyeを実現する「eye.js」:phpspot開発日誌
Javascript Eyes That Follow - OOPStudios.com JavaScriptでマウスポインタ位置に目玉がついてくるxEyeを実現する「eye.js」のご紹介です。 次のような可愛い(?)目玉がマウスにフォローします。 Math.sqrt, Math.atan2, Math.sin, Math.round など、実際に作るとなると、面倒な数学式を活用する必要がありますが、こうしたライブラリになっていれば実現は簡単ですね。 必要なJSを読み込めば、初期化にJSを1行記述するだけで初期化できる簡単さです。 <script type="text/javascript" src="eyes.js"></script> <div id="myEye" style="width: 100px; height: 100px; background: url('white.
JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌
GX - Full-Featured Javascript Animations Framework JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。 jQueryと組み合わせて使うアニメーションライブラリです。 jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。 勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。 以下でその凄さが分かるはず $('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
導入が手軽なGoogleみたいなパスワード強度チェッカーJavaScript
Googleで採用されているパスワードの強度確認チェッカーみたいなものを作ろうぜ！という流れで、『作ってみた』という人が現れた。 パスワードを入力するごとにJavaScriptによってフォームを監視し、ゲージでお知らせしている。 ちょっとした小技として使えそうですね。 ダウンロードは以下からできます ページ下部の方。 設置方法はとても簡単 自分のところにとりあえず設置してみましたがとても簡単です。 http://e0166.com/jq/sample20/ <form id="myform"> <script type="text/javascript" src="pwd_strength.js"></script> <input type="password" id="mypassword" name="mypassword" onkeyup="runPassword(this.valu
簡単！PHPとjQueryでドラックすればリサイズクリップ出来るスクリプト
なかなか凄いぞ！ jQueryとPHPのモジュールで簡単に動いてしまった。 画像をアップロードして、カットしたいところをドラッグ。 その部分が指定したサイズになってクリップされるという代物。 因みに今回アップロードで使用した画像は美人時計さんのもので、1分おきに美人が現れる時計式ウェブサイトです。これも同時にお勧め。 仕様 必要なものは、PHP4もしくはPHP5。 そしてPHP GD ライブラリがサーバーにインストールされている必要がある。 逆に言えばこれだけクリアしていればものすごく手軽に設置できるという魅力あるスクリプトです。 仕様としては、アップローダーが付いており、そこに画像をアップすると、編集モードになる。 そこで、写真の好きなところをドラックして囲い込みをすればそこが画像としてリサイズできるのです。 ダウンロードは以下 ページ下部にある以下のリンクから。 ダウンロードした後は
[JS]既存のテーブルにソート、ハイライト、分割機能などを追加できるスクリプト
既存のテーブルにソート、ハイライト表示、データ分割、ページネーション機能を追加できる、高性能な超軽量（2.5KB）スクリプトをLeigeberから紹介します。 TinyTable JavaScript Table Sorter demo このスクリプトは、以前紹介した「設置も簡単なテーブルのデータをソートする超軽量のスクリプト」のバージョンアップ版で、主な機能は下記の通りです。 既存のテーブルに簡単に設置が可能。 2.5KBの超軽量スクリプト（他のスクリプトへの依存無し）。 列を交互に自動ハイライト。 選択した行のハイライト。 データの表示件数をコントロール。 分割したデータのページネーションを設置。
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
クールなJavaScriptウィジェットを提供するMooToolsプラグイン集:phpspot開発日誌
15 Latest And Interesting MooTools Plugins | AjaxLine クールなJavaScriptウィジェットを提供するMooToolsプラグイン集。 jQueryには負けるかもしれないけど、MooToolsにもクールなプラグインが多数存在するようです。 Mif.Tree FormCheck - Form validation class MooTools ContextMenu Plugin TableGear Mootools Slider With Two Knobs 全部見る 関連エントリ mooToolsを使ったクールなウィンドウ作成ライブラリ「Windoo」 mootoolsベースのウィンドウ内別窓作成ライブラリ「Smoothbox」 小気味よく動作するニュースティッカーウィジェット実装サンプル
画像クロッパー用ライブラリ色々:phpspot開発日誌
Best Image Croppers ready to use for web developers 画像クロッパー用ライブラリが色々と紹介されており、知らないものもあったのでご紹介。 Kroppr 画像の回転とズームが出来るクロッパー。動作もスムーズ。 UvumiTools クロップした部分のx,y, width, height がポップアップ表示されます。 全部見る 関連エントリ フリーの画像リサイズ＆切り取りスクリプト 画像切り取り用PHPライブラリ YUIベースの画像切抜きJavaScriptライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/info/2
[JS]ナビゲーションにツールチップをスライド表示させるスクリプト
[JS]入れ子のパネルをスライドさせるアコーディオンの超軽量スクリプト
[JS]カッコいいインターフェイスのカレンダーを実装するチュートリアル
[JS]画像をスライドするシンプルなカルーセルスクリプト -jCarousel Lite
おしゃれなリスト実装サンプル:phpspot開発日誌