Authorpannyatto

影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』

ボタンなどCSSで作った影のついたボックスにアニメーションの効果をつけれるのが、この『Shadow animation jQuery plugin』です。

この『Shadow animation jQuery plugin』はCSS3 box-shadow プロパティのボックスへ影を付ける効果を拡張してアニメーション化してくれるものです。

サンプルをご覧下さい。

影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル

最新のブラウザに対応しています。

→「影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』」の続きを読む

画像ファイルをアップロードして表示する『jQuery File Upload』

jQuery File Upload Plugin

今回紹介するのは、画像ファイルをアップロードして表示することができる『jQuery File Upload』です。

ドラッグ・アンド・ドロップにも対応していて、アップロード中のプログレスバーの表示やアップロードされた画像のプレビューも可能です。

必要なファイルがパッケージ化されているので、ほとんどそのまま使用できます。

※他人のパソコンからファイルをサーバーにアップすることができるものです。セキュリティー対策は充分に行なって下さい。

→「画像ファイルをアップロードして表示する『jQuery File Upload』」の続きを読む

クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』

今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。

サンプルをみてもらうとわかりやすいと思います。

「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』サンプル」

レスポンシブ対応のドロップダウンメニューですので、スマホなどでも綺麗に表示されます。jQueryプラグインは使用していません。

→「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』」の続きを読む

高機能過ぎるjQueryスライドショー「Camera slideshow」

Camera slideshow

「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。

デフォルトの状態でも十分に機能しますが、スキンやエフェクト、メーターの種類やナビゲーション、画像別に見せる時間を変えるなど様々な設定が可能です。

また、レスポンシブ対応しています。設定によってはフルスクリーンでのスライドショーを背景に設定することもできます。動画を組み込むことも可能です。

サンプルを作ってみました。

「高機能過ぎるjQueryスライドショー『Camera slideshow』サンプル」

(追加記事:jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法

軽くて使いやすいですので、どの画像ギャラリースライダーを使おうか迷った時の選択肢のひとつに良いと思います。

→「高機能過ぎるjQueryスライドショー「Camera slideshow」」の続きを読む

Twitterをニコニコ動画風に流せるjQueryプラグイン「tweetDance.js」

tweetDance.js

画像にTwitter上のツィートをニコニコ動画風に流すという面白いjQueryプラグインが公開されていましたのでご紹介します。

画像の上に指定した検索キーワードを含むツィートをニコニコ動画のように流してくれます。

サンプルはこちら

「画像にツィートをニコニコ動画風に流せるjQueryプラグイン『tweetDance.js』サンプル」

この機能は、ネットショップでも面白い使い方ができそうな気がします。商品に関する感想などをTwitterから拾ってきて表示することでアピール力も増すのではないでしょうか。また画像をみてユーザーにハッシュタグをつけてツィートしてもらうという活用もできそうです。

設置もとても簡単ですのでチャレンジしてみて下さい。

→「Twitterをニコニコ動画風に流せるjQueryプラグイン「tweetDance.js」」の続きを読む

リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」

3D Book Showcase

今回は、新しいオンライン書店のサイトにも応用できそうなリアルな本のショーケースの紹介です。本の情報とともに、立体的にリアルな動きの本が表示され、印象的な演出が実現できます。

ユーザーに新しい体験をしてもらうことで、紹介している本に興味を持ってもらえるような個性的なオンライン書店のサイトが作成できるかもしれません。

サンプルを作ってみました。

『リアルな本を再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」サンプル』

※古いブラウザでは正しく動作しませんので、ご注意下さい。

(サンプルの本の表紙などは、サンプル用にオリジナルで製作していますので、このような表紙の本は実在しません。「葉隠」「武士道」「五輪書」の本自体は様々な出版社から出ています。)

本のショーケースになっているソース部分の仕組みが理解できると、導入は難しくないです。レスポンシブ対応になっているので、色々な画面サイズで自然に閲覧できるのも嬉しいですね。

→「リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」」の続きを読む

タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」

Animated Responsive Image Grid

画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。

レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。

サンプルを見て頂くとわかりやすいと思います。

→ タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその1

→ タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその2

オプションを変更することで、多彩なエフェクト効果が可能になっています。

→「タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」」の続きを読む

ブラウザでiPhoneやiPadのようなスクロールを実現させるjQueryプラグイン「Overscroll」

Overscroll

jQueryプラグイン「Overscroll」は、ブラウザでiPhoneやiPadのスクロールのような動きを再現させることができます。

サンプルを作ってみました。

→ ブラウザでiPhoneやiPadのようなスクロールを実現させるjQueryプラグイン「Overscroll」サンプル

設置も簡単にできますので、見せ方次第では面白い使い方が出来るのではないでしょうか?

→「ブラウザでiPhoneやiPadのようなスクロールを実現させるjQueryプラグイン「Overscroll」」の続きを読む

ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」

jQuery Before/After Plugin

ビフォー・アフターを画像でわかりやすくみせることが出来るのがこの「jQuery Before/After Plugin」です。たとえば、化粧品の使用前使用後の写真、ダイエット前ダイエット後の写真、家のリフォーム前リフォーム後の写真など同じアングルの写真を比べて見て欲しいときに便利です。

サンプルを作ってみました。

→ ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」サンプル

ただ写真を並べて紹介するよりも、印象が強くなりますね。ネットショップでも活用できそうです。

→「ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」」の続きを読む

facebookやTwitterのプロフィールをマウスオーバーして表示させるjQueryプラグイン「Hovercard」

Hovercard

テキストにマウスオーバーすると、facebookやTwitterのプロフィールを取得して表示してくれるのがこのjQueryプラグイン「Hovercard」です。

facebookやTwitterでなくても、任意のテキストなどの情報を表示させることもできます。

サンプルを作ってみました。

→ facebookやTwitterのプロフィールをマウスオーバーして表示させるjQueryプラグイン「Hovercard」サンプル

ユーザーIDを指定してあげるだけで表示してくれるので、設置してしまえば簡単に利用できます。

→「facebookやTwitterのプロフィールをマウスオーバーして表示させるjQueryプラグイン「Hovercard」」の続きを読む