Elastislide - A Responsive jQuery Carousel Plugin | Codrops レスポンシブでカッコいいカルーセル実装jQueryプラグイン「Slastislide」 動きがいい感じな上に、ブラウザを縮小すると全体的に縮小されて使いやすそうです jQueryプラグインの形なので使うのも簡単です 通常モード スマホ等モード。ちょっとちっちゃいかも（＾＾；） 関連エントリ 高機能なカルーセルを実装するjQueryプラグイン５０まとめ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」

Home - Tooltip your images - iPicture jQuery Plugin 写真上にコメントが載せられるjQueryプラグイン「iPicture」 写真の上に＋のアイコンをオーバーレイでき、マウスオーバーでコメントが表示されます。 写真上でそこまで邪魔にならないけどそれなりに目立ち、説明を読んでもらいたいような場合に使えそうです コメント表示例。半透明なのでそれほど嫌な感じでは無いですね 商品の説明等に使うと分かりやすい商品説明ページが作れるかもしれませんね 関連エントリ Flickrみたいに写真内に枠を作ってコメントできるようにするjQueryプラグイン CSSのみで画像に違和感なく注釈を入れるサンプル

Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。 jQuery Retina Plugin jQuery Retina -GitHub [ad#ad-2] jQuery Retinaのデモ jQuery Retinaの使い方 jQuery Retinaのデモ jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。 imgタグに「data-retina」属性を加える。 画像のファイル名に「-2x」を加える。 コールバック関数を使ってファイル名を指定する。 表示はどの方法を使っても一緒ですが、下記にそれぞれの方法で実装したデモがあります。 デモページ [ad#ad-2] jQuery Retinaの使い方 jQuery Retinaの使い方は簡単です。

Adipoli jQuery Image Hover Effects 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」 画像にカーソルを合わせるとアニメーションを画像に重ねて、インタラクティブな効果を持たせることができます ただ画像を並べるよりも面白いものが作れそうです $('#image1').adipoli(); 使い方もこんな感じで死ぬほど簡単です 勿論多彩なオプションでカスタマイズ可能です 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」

jQuery HTML5 Fullscreen Slideshowは、フルスクリーンのスライドショーを可能にするプラグインです。 画像をクリックするとフルスクリーン表示になり、複数の画像を見ることができます。 jQuery HTML5 Fullscreen Slideshow

Kunitaka Kawashimo アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン／Webデザイン／撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp

表示サイズに合わせて、スライドショー自体のサイズやサムネイルなどを最適な状態で提供するスライドショーを実装するjQueryのプラグインを紹介します。 もうすぐ始まるIEの自動アップデートのIE8にも対応しています。 Camera | a free jQuery slideshow by Pixedelic [ad#ad-2] Cameraのデモ Cameraの使い方 Cameraのデモ デモは上記のトップにあるものと、他に3種類のスライドショーがあります。 トップのものが一番シンプルで、Cameraの基本性能を楽しめます。 画像の切り替えには、美しいアニメーションが採用されています。 デモ：Fullscreen フルスクリーンタイプのスライドショー。 Cameraの使い方 Cameraで使用する基本的なHTMLの構造から。 HTML div要素にHTML5の独自属性で「data-src」を

シンプルにロールオーバーを実装する方法 リンク用途などにおいて画像のロールオーバーはかなり頻繁に利用されていますが、これをシンプルに実現できるようにするプラグインをご紹介。 今回は、以下のような機能があるjQuery.rollover.jsを使用していきます。 HTMLで指定するのは初期表示の画像だけ 指定された箇所でも _on が付いている画像は無視 ロールオーバー画像をプリロード 拡張子は何でもOK (png, jpg, jpeg, gif, etc…) ロールオーバー画像を示す _on の部分を自由に変更できる このスクリプトを実行するにはjQueryが必要になります。公式サイトから最新版をダウンロードしてください。 jQueryをHEADタグ内で読み込みます。 jquery.rollover.jsをjQueryの直後に読み込みます。 <script type="text/javas

jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla

Casual Slider [ad#ad-2] Casual Sliderの特徴 Casual Sliderのデモ Casual Sliderの使い方 Casual Sliderの特徴 Casual Sliderは実装が簡単で、シンプルながら充分な機能を備えたコンテンツスライダーです。 4KBと超軽量のスライダー タイマー機能付き あらゆるHTMLエレメントを配置可能 全てのメジャーブラウザをサポート カスタム ナビゲーション セットアップが簡単 アニメーションの種類は多数 デフォルトのテーマも用意 Casual Sliderのデモ デモもシンプルですが、Casual Sliderの使い勝手が分かると思います。 各パネルに半透明のキャプションも表示できます。 Casual Sliderの使い方 HTML 各パネルはリスト要素で実装します。 <div id="slider"> <div cl

jQuery Content Sliderは、軽量なスライドショーを実装するjQueryプラグインです。 jquery.easingを使用しているので、easingの具合はeaseOutElasticなどで調整できるようです。 jQuery Content Slider

これはすごい、かも。オーバーレイなどのブレンドモード効果を与えられるjQueryプラグインです。 マウスオーバーすると画像が変化します。 オーバーレイ効果 焼き込み効果 $7で配布中のようです。 jQuery Blend Modes

普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.js - The jQuery Slider Plugin with Infinite Style [ad#ad-2] Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスライダーです。 オープンソース。 すべてのモダンブラウザをサポート。 スマートフォンなどのタッチデバイスをサポート。 古いブラウザでも機能します。 ※IE7とFirefox3.6でもテスト済み。 セマンティックなマークアップ。 Responsive Web Des

Kunitaka Kawashimo アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン／Webデザイン／撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp

Sequence.jsは、ページの要素をばらばらにアニメーションするjQueryプラグインです。 とても気持ちいい動きをするので、ぜひ見てみてください。 水平のスライドやパララックスのスライドなどがあります。 Sequence.js

8 Responsive jQuery Slider Plugins | Resources レスポンシブなjQueryスライダー実装プラグイン８個 多様化するデバイス環境の中、レスポンシブの簡単さと柔軟さは今後はWEBデザイナーさんの常識となってくると思いますが、レスポンシブな仕組みを使ったスライダー実装プラグインです。 今後はプラグインもレスポンシブがデフォルトなんていう時代になっていくんじゃないかと思っています。 iPhoneに対応したらそのまま使えないプラグインって微妙〜、という感じになっちゃうかも。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 次世代のイメージマップを実現できるjQueryプラグイン「ImageMaps