Animated Image Piecesは、画像が細かいピースに分解されるアニメーションを実装できるのが特徴です。1つ1つ小さなピースがバラバラになり、再構築されて次の画像を表示したりといったことが可能です。 下記のページから、Animated Image Piecesの実際のデモ動作をチェックできます。 デモ デモは全部で4タイプ用意されています。画面の右下から各デモを切り替えることが可能です。 デモ1ではいくつか人の名前が表示されていて、いずれかの名前を選択すると現在表示されている画像が細かいピースに分解されて、再構築して目的の画像を表示させるといった一連のアニメーションを確認できます。 単純に画像を切り替えるだけでなく、このようなエフェクトがつくことでとても印象に残りやすいですね。スタイリッシュでとてもかっこいいアニメーションです。 また、デモ2ではエフェクトが3種類も用意されてい

flubberは、滑らかな2Dによるシェイプアニメーションを実装することができるJSライブラリです。アニメーションとともに、さまざまな形に変化していくので見ていてとてもおもしろいですね。 2Dによるシェイプ間をスムーズに構築 flubberの実際のデモページは以下になります（SVGパスを使ったベーシックなタイプです）。 デモ デモでは、音符、星、ハート、手、飛行機……など、いろんな形に変化していく動作を見ることができます。アニメーションは、カクカクすることもなく非常に滑らかで、見ていてとても気持ちいいです。 2Dによるシェイプ間をスムーズに構築したいという人にはピッタリのツールですね。 また、flubberにはAPIもいろいろ用意されています。いくつか具体的なAPIを挙げると、flubber.interpolate(fromShape, toShape [, options])、flubb

scrollMonitorは、要素が表示領域（ビューポート）に入ったり出たりすることでイベントを受け取ることができるスクリプトです。Watcher Objectsにより、要素を監視してイベントをトリガーします。 scrollMonitorの実際のデモページは以下からチェックできます。 デモ デモではナンバリングされた沢山の要素が表示されています。スクロールすると表示領域内で一番上部の列が青色で表示され、一番下部の列が黄色で表示されます。 Watcher Objectsを使用することで、要素の監視とイベントのトリガーを実現しているとのこと。ちなみに、Watcher Objectsには要素の可視性や表示領域に対する相対的な位置などを監視する要素に関する情報も含まれています。 具体的なwatchアイテムは以下の通り。 DOM Element Object Number jQuery object

EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大やパンができるjQueryプラグインです。画像にカーソルを乗せるだけで拡大され、カーソルを動かすだけで好きな位置の拡大画像をチェックできます。 以下、EasyZoomの実際のデモ動作になります。 デモ デモページでは、Overlay、Adjacent、With thumbnail images、Active/Inactive toggleの4つのサンプルが用意されています。 1枚の画像にマウスオーバーして拡大画像をチェックするものや拡大された部分を通常画像の隣に表示するもの、またはサムネイルから画像を切り替えれたり拡大機能の有効・無効を切り替えたりできるものまで、いろいろあります。 操作がとてもシンプルで、画像にカーソルを乗せるだけで拡大画像がローディング＆表示されます。そして、カーソルを動かすだけで見たい部分へ自由自在に

Pogo Sliderは豊富なスライドアニメーションが揃っているjQueryプラグインです。スライドダウン、スライドアップ、スピン、3Dフリップ、回転などスライダーに関するたくさんの種類のアニメーションが用意されています。 以下のページからPogo Sliderの実際のデモを確認することができます。 デモ デモではスライド、ブロック、スプリット、zip、expand、fold、フェードなど数多くのスライドトランジション動作を確認することができます。他にもスライドダウン、スライドアップなどのエレメントトランジションもチェックできます。 オプションで設定できる項目もかなりあるので、カスタマイズしたスライダーを実装したい�方にはピッタリですね。 自動再生やレスポンシブのオン／オフなどを指定することができます。 使い方はこんな感じでマークアップしていきます。 <div class="pogoSli

とても軽量でレスポンシブにも対応しているjQueryスライダー「Unslider」がよさそうだったのでメモしときます。マークアップも使い方もとてもシンプルだし、約3KBという軽さが魅力的ですね。スライドのスピードやキーボード操作もオプションで設定することができます。 [ads_center] 使い方 レスポンシブということで、実際にブラウザサイズを変更して確認してみました。以下は通常時↓ ブラウザサイズを縮小↓ ちゃんとレスポンシブに対応されていますね。ということで、以下、使い方です。 jQueryとプラグインを読み込みます。 <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="//unslider.com/unslider.min.js"></script> HTMLをマークアップしてきま

CurvedTextというjQueryプラグインを使えば、任意の曲線上にテキストを配置することができます。テキストをカーブさせながら配置することができるので、応用次第で色んな見せ方が可能になりますね。 [ads_center] CurvedText こんな感じで半円を描いたテキストや、 円を描いたテキストなど、カーブといっても様々な曲線配置が可能です。おもしろいですね。 というわけで、テキストを曲線に配置したい時に活躍してくれる、jQueryプラグイン「CurvedText」のご紹介でした。

jQuery Panorama Viewerはパノラマビューを実装することができるjQueryプラグインです。画像をマウスでドラッグすることで横に広がっている画像を見ていくことができます。スマホでも試してみたところちゃんと動作しました。 [ads_center] jQuery Panorama Viewerの使い方 jQuery Panorama Viewer by Pete R. | The Pete Design jQuery本体とプラグインファイルを読み込んだ状態で、以下のように画像をマークアップします。 <div class="panorama"> <img src="sample.jpg"> ... </div> で、プラグインをセット $(".panorama").panorama_viewer({ repeat: false, direction: "horizontal",

とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグインのイメージギャラリーを実装できる「Heap Shot」です。実際に写真を手に持って見ているかのような、そんなアニメーションを付けることができます。使い方もシンプルでよさそうですね。 [ads_center] 使い方 このように、写真が上から下へ移動しながら順番に表示されていきます。おもしろいアニメーションですね。 マークアップもとてもシンプルです。 <ul class="heapshot"> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> ・・・（中略）・・・ </ul> Heap Shotの呼び出し。 jQuery(document).ready(function($) { $