スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」 2011年06月24日- Welcome AlbanX.com スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」。 次のような見栄えで、スマートフォンでスワイプすれば回転するようなUIが作れるjQueryプラグインのご紹介です。PCでもホイール等で動作します。 スマートフォンサイトの重要度が今度ますます高まってくると思いますが、こうしたUIを実現したいという時に使えますね <div>の中に<img>を並べて初期化するようなのでHTMLも汚くなりません。 関連エントリ エレメント内のテキストを絵文字に自動で変換してくれるjQueryプラグイン「jQuery Emoticons」 テキストにグラデーションをかけられるjQueryプラグイン

ページ内のさまざまな要素に、オーバーレイをアニメーションで簡単に適用できるjQueryのプラグインを紹介します。 Simple Overlay [ad#ad-2] 上記ページの右上にもデモが掲載されており、左の「Try It」ボタンをクリックすると下記のようにモニターの画像にオーバーレイが適用されます。 オーバーレイの解除はオーバーレイをクリックです。 デモのキャプチャ（拡大） Simple Overlayの主な特徴 さまざまなエフェクト jQueryを使用しているので、フェードのエフェクト、スライドのエフェクトなどさまざまなアニメーションでオーバーレイを適用できます。もちろん、エフェクト無しも可です。 CSSでのフック オーバーレイを適用する要素に、オーバーレイがアクティブである時にclass名を付与することができます。 コールバック オーバーレイ時にコールバックを設定することができます

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

WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」 2011年05月09日- Awkward Showcase ? A jQuery Plugin | Awkward Group - A Digital Agency WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」。 divの中に複数のdivを並べて初期化することで簡単にコンテンツスライダーを作れます。 １つのコンテンツにはHTMLが入れられ、ツールチップ表示用の機能なんかも同梱されています。 初期化も次のように簡単。コンテンツのサイズ等をオプションとして渡せます。 $("#showcase").awShowcase({ content_width: 700, content_height: 470 }); デモページはこちら

一つ一つのパネルを異なるサイズで、最適な位置に表示し、異なる背景やアニメーションを設定できるスライドショーのスクリプトを紹介します。 imgPlayer デモページ [ad#ad-2] デモでは10枚のパネルがセットされており、それぞれ異なるサイズ、最適な位置で表示し、さまざまなアニメーションで切り替わります。 2枚目を表示したキャプチャ 静止画ではその楽しさが分からないので、ぜひデモをどうぞ。 デモページ スライドショーの操作は、画像の左右のアロー、下のナビゲーション、キーボードの矢印キーに対応しています。 実装は少し面倒で、個々のパネルごとに座標とサイズなどを指定します。 キャプションも設定できます。 JavaScript パネル（一枚）の設定例です。 [221,30,386,518,{ onStart: function(){ darkStyle(); $('#text').html

Create a CSS3 Image Gallery with a 3D Lightbox Animation - Inspect Element CSS3をフル活用した立体的な画像ギャラリー作成デモ。 一見、角丸に綺麗にデザインされたギャラリー。これだけでもいいのですが カーソルを合わせると立体的に浮上がります。 更にクリックするとLightBoxエフェクト。 単純に使うだけでなく、中身を解読すれば、CSS3についての知識が深まりそうです。 関連エントリ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 超カッコいいApple風スライドショーギャラリー作成チュートリアル スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ

デモページ ダイナミックな斜め方向のスライドのアニメーションで表示 Mosaicの実装 HTML: circle 上記の一番上のキャプチャ、「circle」の実装例です。 <div class="mosaic-block circle"> <a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay">&nbsp;</a> <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/></div> </div> JavaScript:circle $(document).ready(function($){ $('.circle').mosaic({ opaci

画像にマウスをホバーさせると、キャプションがアニメーションでスライド表示される省スペース用エフェクトを実装するスタイルシートのチュートリアルを紹介します。 Slide In Image Captions [ad#ad-2] キャプションをスライド表示させる画像のデモ デモでは、画像ごとに異なる方向から異なる位置にキャプションがスライド表示されます。 デモページ スライドは、CSS3 transitionに対応したブラウザ（Chrome, Safari, Opera）ではアニメーションで表示し、非対応ブラウザ（Firefox3）ではアニメーション無しで表示されます。 [ad#ad-2] 以下は元記事の各ポイントを意訳したものです。 なぜ、このようなエフェクトをするのでしょう？ それはレイアウトのスペースを節約するためです。そして、キャプションの存在は画像からユーザーの気を散らしてしまうことも

画像を使って、スムーズなアニメーションで開閉するアコーディオンメニューを実装するjQueryのプラグインを紹介します。 デモ：vertical, easeOutBack [ad#ad-2] Accordion Image Menuの実装 HTML 各パネルはリスト要素で実装されています。 <ul id='menu'> <li><a href='link1'><span>title 1</span><img src='image1.jpg' /></a></li> <li><a href='link2'><span>title 2</span><img src='image2.jpg/></a></li> <li><a href='link3'><span>title 3</span><img src='image3.jpg' /></a></li> <li><a href='link4'>

画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade

画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 2011年01月21日- pictureMenu 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」。 マウスカーソルを合わせるとメニューの幅がニュイーンと伸びるUIが作れます。 動きがなかなかクールなので、うまく画像と組み合わせることでカッコいいサイト作りに役立てられそうです。 次のような比較的整ったHTMLコードを初期化する感じです。 デモはセンスがいいとは言えないかもしれませんが、工夫すればかなりカッコよく出来そう。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 ビローンと伸びるドロップダウンメニュー実装jQueryサンプル クールにアニメーションする色合い様々なjQueryメニューサンプル色々

jQuery hoverZoom - a lightbox and gallery alternative カーソルを合わせた際、その場で大きくズームさせられるjQueryプラグイン「hoverZoom」。 画像のサムネイルがあったとして、カーソルを合わせることでその場でアニメーションしながら拡大できるライブラリです。 その場で広がる感じでアニメーションして拡大されます。 ギャラリーなんかに実装する際の１つの選択肢として使えます。 関連エントリ LightBoxライクに同一ページ内の要素をポップアップするライブラリ jQueryベースのLightBoxクローン「prettyPhoto」 表示法が新しくセクシーなLightBox「SexyLightBox」 クールにアニメーションする角丸LightBox「prettyPhoto」

なんでもない普通の画像でもちょっとしたエフェクトを与え、人目を惹くようにするjQueryのプラグインを紹介します。 デモページ [ad#ad-2] Little Colour Boxesの実装 HTML HTMLは画像を配置したimg要素にidを追加するだけです。 id名は任意のものが利用でき、classなどjQueryの書式で記述できるものに変更可能です。 <img src="images/nice_pattern_islamic.gif" width="425" height="425" id="image-boxes"> JavaScript 「jquery.js」と当スクリプト「jquery-littlecolourboxes.js」を外部ファイルで指定し、下記のスクリプトを記述します。 $(document).ready(function() { $("image-boxes")

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

Display Elements Sequentially with jQuery デモページ [ad#ad-2] 実装は非常にシンプルです。 HTML デモでは、画像をリスト要素で配置しています。 <ul> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> </ul> HTML アニメーションのトリガーとなるのは、「Show Images」のテキストリンクを使用しています。 <p style="clear: both; display: none;