CategoryjQueryプラグイン

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」」の続きを読む

商品画像を360度回転させてみせることができるjQueryプラグイン「Spritespin」

spritespin jQuery plugin

ネットショップなどではいかに商品をお客様に伝えるかが大切になります。商品によっては360度全方向から商品のイメージをみせたい場合もあるでしょう。

このjQueryプラグイン「Spritespin」を利用すれば360度全方向からのビューが簡単に実現できます。FLASHを使用していないのでiPhoneなどでも表示されます。

サンプルはこちらになります。

→ 商品画像を360度回転させてみせることができるjQueryプラグイン「Spritespin」サンプル

画像を準備すれば簡単に実装できます。ただ商品を回転させながら全角度からうまく撮影するにはちょっと工夫が必要になりますね。

→「商品画像を360度回転させてみせることができるjQueryプラグイン「Spritespin」」の続きを読む

テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」

Sliding Letters with jQuery

「Sliding Letters with jQuery」を利用すると、マウスオーバー(テキストにカーソルを合わせたとき)にお洒落にテキストがが変化します。

ちょっと大胆なメニューやリンクテキストを強調させるのに使えそうです。少しHTMLとCSSがいじれれば簡単にアレンジができます。

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

→ テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル

ポートフォリオサイトだけでなく、美容室やサロンなどのおしゃれ系なサイトに活用できそうです。背景画像も設定できるので、イメージに合わせて背景画像も変えてみて下さい。

→「テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」」の続きを読む

絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」

Fullscreen Pageflip Layout

本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は、こちらの「Fullscreen Pageflip Layout 」を利用すると良さそうです。

ぺらぺらの紙をめくるというよりは、絵本のような厚みのある紙をめくっているような感じが実現されています。

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

→ 絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」サンプル

※IE8など古いブラウザではアニメーションは動作しません。

次のライブラリーやjQueryプラグインを組み合わせて作ってあります。

  1. BookBlock by Pedro Botelho
  2. Custom jQuery++ by Bitovi
  3. jScrollPane by Kevin Luck
  4. jQuery Mouse Wheel Plugin by Brandon Aaron
  5. Custom Modernizr (peek inside to see what this build includes)

難しそうですが、ソースを一式配布してあるのでそのソースを利用してコンテンツを変更すれば簡単に実現できます。

→「絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」」の続きを読む

iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」

Jquery Magical Contact Form

iPhoneの画像を利用したとても個性的なアニメーションコンタクトフォームを紹介します。

「Magical Contact Form」と名付けられたユニークな効果のあるフォームです。なぜかiPhoneにカードが収められて飛んでいきます。テキストを入力しているときのアニメーションもユニークです。

画像を変更するだけでも容易にカスタマイズできますので、初心者のかたでもデザイン変更が簡単にできます。

サンプルを作ってみました。サンプルといっても画像を変更しただけです。

→ iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」

※実際に送信はされません。

過去の記事で、色々なモバイル端末のPSDファイルを紹介しています。利用すれば面白いフォームが出来ると思います。
iPhone、iPadやMacなどのディスプレイを集めたPhotoshop(フォトショップ)端末ディスプレイPSD無料素材集

もちろん敢えてiPhoneなどの画像にこだわらなくても、自分で封筒の画像を用意するなど発想次第でユニークなデザインが実現出来ると思います。

→「iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」」の続きを読む