Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ

一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Image Carousel [ad#ad-2] Agileは以前ちらっと紹介しましたが、つい最近バージョンアップしたので改めて紹介します。 以前のバージョンではjQuery UIも併用するタイプでした。 Agile Carouselには、下記のさまざまなタイプのスライドショーが用意されています。

IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す

異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な

ShineTime ? A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects 画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装する例が公開されています。 透明と白のグラデーション画像を斜めにして画像や枠の上をアニメーションで横切らせるというシンプルな方法でFlashサイトのようなクールな演出を実現しています。 実際のデモを見てみましょう。 超クールですね。 チュートリアル形式になっているので横切らせる画像を替えたりしても面白いかも。 このエフェクトは使える気がします。 チュートリアルでは現在のところjQueryは使っていますがプラグインの形ではないのでコードを記述する必要がありますが、プラグインになったらより便利そうですね。 関連エントリ 画像の映り込みエフェクトを実現するJavaScrip

写真提供元　「ドバイ旅行のすすめ」byごきげんルークさん サムネイル画像をマウスオーバーすることで表示する画像を切り替える方法を解説します。このようにすることで大きな画像でもスペースを節約して表示することが可能になります。 ■画像の準備 サムネイルと表示画像の大きさを決めて、写真のサイズの調整をしましょう。「縮小専用。」を利用すれば、一括でサイズの変換も出来るので便利です。 ここでは表示画像のサイズをwidth="133" height="200"として、サムネイルの画像のサイズをwidth="26" height="40"としました。 画像の大きさの調整が完了したら画像ファイルをブログスペースにアップロードして、画像を表示させるためのURLをメモしておきます。 ■テーブル(表)の準備 このページの場合は右が画像表示画面で左に４つのサムネイルを表示させています。 表示画面 サムネイル1 サ

jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-

自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」 2011年06月16日- Auto-growing and re-sizable textarea ? Jquery Plugin - Hycus 自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」。 次のような、どんなサイトのデザインでもじゃまにならない、普通のテキストエリアの下にツマミをつけたようなテキストエリアが実装できます。 改行をうって文書が長くなろうと自動でサイズが大きくなる点も特徴。 実装は必要なライブラリを読み込んだら以下１行でOK。 対象もjQueryのセレクタで一括指定も可能。 $('#txtarea').hycustextarea(); ひょっとしてHTML5いらないんじゃないかとい

ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」

ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」 2010年06月10日- Video LightBox - Embed video to your website with beautiful Lightbox effect! ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」。 名前から推測するに、単に動画をLightBox化しただけでしょう、と思いきやなかなか素晴らしいプラグインになっていたのでご紹介です。 動画のサムネイルを次のように様々なスキンによって修飾できます。クリックすればニュイーンとLightBox表示されるというオシャレさ加減がいいです。 更に埋込可能な動画形式が豊富で、flv, mp4, 3gp や、外部動画サイトのYoutube, Facebook, Goo

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 かなり情報が多くなってきたjQuery。使いやすいし、知識の無い僕でも簡単に使えるので重宝してます。そんなjQueryですが、多すぎて探すのも大変ですね。以前ご紹介したサイトも兼ねて、ブックマークの整頓がてら、順回しているサイトをご紹介します。 codrops jQueryと言えば個人的にここを思い浮かべます。情報も新しく早い。英語OKならRSS購読推奨です。 codrops css-tricks こちらはWebデザイナー目線で情報を配信しています。有益jQuery情報多数ですが、タグやカテゴリが無い（あるかもだけど、

CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの

ブロック内コンテンツを読込画像と共にAjaxで読み込ませアニメーション切替えできるjQueryプラグイン「Ajaxloader」 2011年06月29日- Ajaxloader 1.5.0 ブロック内コンテンツを読込画像と共にAjaxで読み込ませアニメーション切替えできるjQueryプラグイン「Ajaxloader」 $('#localframe').ajaxloader('page1.html');のように呼び出すことでブロック内にほかのHTML内容を読み込ませられます。 jQueryを使えば大して難しくはありませんが、ローディング画像を付けつつフェードアニメーションで切り替えるという効果も付けられます。 （引数にページ名を指定するだけなので簡単） 読込中はローディング画像が表示。 ローディング画像はカスタマイズ可能 SEO用にURLも切り替わってくれたら嬉しいのですが今のところそのよう

jsdo.itではInternetExplorerやFirefoxなどのWebブラウザだけでコードが書けちゃいます。

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る