MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
プラグインを使わずjQueryに23の機能をつける方法 | Web活メモ帳
jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。 詳しくは以下 1.右クリックを無効にする方法 右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2.フォームの初期値を消す方法 検索フィールドなどに。 $(document).ready(function() { $("input.text1").val("Enter your
Introducing jQuery
jQueryって何 JavaScriptのフレームワーク みんな超使ってる ややこしいことが超簡単にできる John Resigってすげー人が作ってる とにかくイケてる なぜjQueryはイケてるのか 超短く書ける。そう作られてる。 Write Less, Do More. たくさんプラグインがある。使うの簡単。 DOM操作周りにめちゃ強い。 JavaScript始めるのにもオススメ。 ブラウザごとの差異も吸収してくれちゃう ブラウザ上でなんかするのに必要な機能が詰まってる プログラム書く流れ JavaScriptに限らず、大体こんな感じ。 こんなん作りたい APIを調べる それをどーやって使うのか調べる なんか難しそうだったらフレームワークとか調べる 文法を知る（大体どれも大きくは変わらない） 書いてみる APIとかフレームワークとか知らん 大丈夫です。 そんなん普通、調べないと知りませ
jQueryプラグイン探しの時間を短縮できるかも・デモのキャプチャでギャラリー形式に紹介するJquery Labs - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的にjQueryプラグインを探す 時に結構時間が掛かっている のでどうにかしたいと思っていま したが、なかなか素敵なサイトが ありましたのでシェア。プラグイン のデモをサムネイルでギャラリー 形式にして紹介しています。 デモから探せるので、Webデザイナーさんには重宝されそう。量もなかなか揃っているのでここから探す癖を付けようかと思うくらいです。どこかで見たけどブクマし忘れた、なんてときに見るのもいいかもしれませんね。 こんな感じでデモのキャプチャがズラッと表示されていますよ。上と下は広告です。 個別ページにはデモとソース、DLのリンクが用意されています。 カテゴリもメニューやギャラリー、チュートリアルなどが用意されていますよ。 タグクラウドでより絞り込める。
作って学ぶ！jQueryの記事一覧ページ | バシャログ。
[作って学ぶ！jQuery] 第5回 ajaxを使って複数ブログの最新記事一覧を表示する 作って学ぶ！jQuery
JSによるコンテンツスライダーを使用しているサイトのサンプル集 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的なまとめです。スライド で画像やコンテンツを実装して いるサイトのデザインサンプル です。jQuery等を使用している サイトに絞っています。 インスピレーション用のサンプル集です。サンプルを見ることで、使い勝手良し悪しの判断も出来るのではないかと思います。ブラウザはChromeのみでしか確認していません。 hm-andrei.ro デザイナーさんのポートフォリオ。手やフルーツは固定されています。いいアイデアですね。 hm-andrei.ro jguiss 画像は縦にスライドし、同時にテキストコンテンツが横スライドします。 jguiss Crush + Lovely コンテンツがダイナミックに縦スライドします。背景を変えるとなんか新鮮ですね。ロゴとサイドバーは
Flashのような8種のエフェクトを選べる汎用的なjQueryギャラリー・AviaSlider - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Flash製のギャラリーなどでよく 見かけるようなエフェクトが8種 用意されているjQueryを使った スライドギャラリーのAviaSlider をご紹介します。 若干怪しいですけどIEでも動きました。懲りすぎてない、汎用的なギャラリーです。
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
2010年の間に見ておきたいjQueryプラグイン12 – creamu
jQueryのプラグインをチェックしておきたい。 そんなときにおすすめなのが、『12 Helpful jQuery Plugins to Check Before Ending April 2010』。2010年の間に見ておきたいjQueryプラグイン集です。 いい感じのものがまとまっているので、いくつかご紹介しますね。 jQuery ajaxContactForm plugin フォームのバリデータ。背景色を変えることでシンプルにアラートしてくれる。MITライセンス Image Puzzle Using jQuery 画像のパズルゲームを作れるプラグイン jQuery Mega Menu jQueryを使った、見た目も動作もクールなドロップダウン型メガメニュー JCoverflip Macのカバーフローのようなギャラリーインターフェースを作れるプラグイン jQuery Bubble Po
[JS]ページの流れをさえぎらない画像拡大スクリプト - jQuery.popeye
画像を拡大するスクリプトとしてはLightboxやfancyboxが有名ですが、これらはページの流れをさえぎってしまう弱点をかかえています。 この弱点を改良すべく開発された新しい画像拡大（ギャラリー機能付）スクリプトをChristoph Schüßlerから紹介します。
【jQuery】画像・テキストが切り替わるアニメーション
Digitale Relevanz für Unternehmen. Wir sind die Medienfreunde, eine Design- und Digitalagentur in Leipzig. Seit 2004 kreieren wir nutzerzentrierte Websites und webbasierte Anwendungen, die hundertprozentig auf die Unternehmensmarke abgestimmt sind und höchsten Standards entsprechen. Unsere Erfahrung ermöglicht eine ganzheitliche Marketingberatung und die Integration der Website in ein schlüssiges
The Silky Smooth Marquee
As we abused the Internet back in the 90 with tags like <blink> and <marquee> the last 10 years have seen the gradual extinction of these proprietary tags until we did full circle and the marquee effect appears in CSS 3. There's actually a very strong business case and requirement for the marquee tag - since the only the alternative is often a hacky solution (I feel) that shifts the CSS left posit
MacのStackの動きを実装するjQuery – creamu
洗練されたインターフェースを実装したい。 そんなときに参考になるのが、『”Outside the Box” Navigation with jQuery』。MacのStackの動きを実装するjQueryです。 MacのDock風の動きはよく見られますが、Stackの動きを作っていますね。動きが軽快でかなり気持ちいいです。HTMLはul, liでクリーンに書かれていますね。 デモは以下から。 Demo – see it in action 一度見てみてください。 “Outside the Box” Navigation with jQuery いろいろぱつぱつだったけどようやく少し落ち着いた。一つリリースできて、もう一つリリースできそうで、いい感じです。クライアントに喜んでもらえるとがんばった甲斐がありますね。
人物のシルエットにマウスオーバーすると写真がフェードインするjQueryプラグイン - かちびと.net
これは結構実用的なテクニック なのでは。人物のシルエットに マウスオーバーすると写真が フェードインします。というか、 人物じゃなくても良さそうなので 色々使い道がありそう。 css trickの画像をフェードインさせるjQueryとcssのクールなテクニックをメモ。 Silhouette Fadeins フワッと出てくる写真がかっこええっす。IE6では表示されませんでしたが、コンテンツを際立たせるのにいいテクニックじゃないかなと思います。 ロールオーバーにはcssスプライトを採用してるみたいです。多少ズレるのでやや暗めの写真にした方がいいかな・・ マークアップも記載されています。 ダウンロードとデモは以下からGOです。 Silhouette Fadeins
アンチエイリアス付きの角丸が簡単に設定できる「JQuery Curvy Corners」
アンチエイリアス付きの角丸が簡単に設定できる「JQuery Curvy Corners」 Check Tweet 配布元：Anti-aliased Rounded corners with JQuery ライセンス：General Public License JQuery Curvy CornersはcurvyCornersのjQuery版とも言えるJavaScriptライブラリでアンチエイリアス付きの角丸を簡単に設定することが可能だ。 使い方 head要素内などで、jQuery本体と配布サイトよりダウンロードしたjquery.curvycorners.min.jsを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.curv
[本]jQueryをしっかりと使いこなせるようになりたい人向けの一冊
jQueryをこれから始めたい人、もう少ししっかりとjQueryを使いたい人にぴったりの本を紹介します。 初めての献本です 当サイトで初の献本で、「紹介しないという判断でもかまわない」ということで、気軽な気持ちで本を受け取りました。 しかしこれがまた、今まで読んだ中で一番分かりやすく、紹介せずにはいられないなと思ったしだいです。 こんな人向け 帯に「もう、プログラマーには頼らない！」とあるように、スクリプト自体をじっくり掘り下げたものではなく、実装レベルでしっかりと使い方をマスターしていこうというものです。 HTMLとCSSは分かるけどjQueryはいまいちだ、という人にはぴったりの本だと思います。 カラーがうれしい オールカラー、キャプチャ付きくらいでは珍しくないですが、コードがシンタックスハイライトに対応しているのが見やすいです。 全部の本が対応してくれればいいのに。 そして、ところど
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
![jQuery基礎文法最速マスター[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
CSSとJavaScriptを巧みに使用した面白いデモンストレーション -PushingPixels
PushingPixelsからPNG画像の影をコントロールするデモとアニメーションで二つの画像を表示するデモを紹介します。 dynamic PNG shadow 「dynamic PNG shadow」では左下のスイッチをオンにすると、その光源の位置に従ってロゴに影が表示されます。 また、ロゴと光源はマウスのドラッグ操作で移動させることができます。 Animated HDR Photo 「Animated HDR Photo」では真ん中のスライダーを移動させることで、二つの画像のビフォーアフターを表示することができます。 スライダーはアニメーション動作に対応しており、画像の任意の場所をクリックするとそのポイントにアニメーションでスライドします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.professorcloud.com/mainsite/carousel.htm
[JS]ブラウザのサイズに合わせてレイアウトがアニメーションで変更されるスクリプト -Sliding Resizable Grid