Categoryイメージエフェクト

カーソルを乗せると画像が拡大するjQueryプラグイン「ZooMove」

ZooMove

ZooMoveは、マウスオーバーで画像を拡大させてみせることができるjQueryプラグインです。

画像を一部を詳細に見せたいときなどに効果的。この動きは、ネットショップの商品紹介の画像でもよく使われる機能ですね。

こちらのjQueryプラグイン「ZooMove」を利用すると、拡大させる動きも滑らかで、ストレスなく見せることができます。

動きはサンプルをこちらのご覧いただくとわかりやすいと思います。

カーソルを乗せると画像が拡大するjQueryプラグイン「ZooMove」サンプル

ググってみましたが、まだjQueryプラグイン「ZooMove」は日本語では紹介されていませんでした。

でも、使いやすいのでこれから日本でも使われる機会が増えそうな気がします。

→「カーソルを乗せると画像が拡大するjQueryプラグイン「ZooMove」」の続きを読む

画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。

画像にカーソルを合わせると画像が変わるというという効果を「ロールオーバー」といいます。

メニューやカートに入れるなどのボタンでもよく使われていますね。

画像のロールオーバーはCSSやJavaScript(jQuery)を使用して実装することができますが、「smoothRollOver.js」というjQueryプラグインを使用すると、比較的カンタンに実装できる上にロールオーバー効果をなめらかにすることが出来るようです。

今回は、jQueryのみのロールオーバー時と「smoothRollOver.js」プラグインを利用したロールオーバー時がどの程度違うかを比較するために、実装方法も合わせて説明したいと思います。

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

1. jQueryでのロールオーバーサンプル

2.「smoothRollOver.js」を利用したロールオーバーサンプル

好みもあると思いますので、好みやデザインに合わせて使い分けたいですね。

それぞれの設定方法は続きをご覧下さい。

→「画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。」の続きを読む

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

tweetDance.js

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

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

サンプルはこちら

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

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

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

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

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

jQuery Before/After Plugin

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

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

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

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

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

カーソルをのせるとキランと画像を光らせるjQueryプラグイン「jQuery Gloss」

jQuery Gloss

画像にマウスオーバーするとキランと光ったような効果が出せるのが、jQueryプラグイン「jQuery Gloss」です。

クリスマスのムードのこの時期。トップ画像やバナー画像などで、ちょっと目を引くこの効果を利用すると良いのではないでしょうか?

サンプルはこちら

→ カーソルをのせるとキランと画像を光らせるjQueryプラグイン「jQuery Gloss」サンプル

ファイルのサイズも2k程度で軽く、設置も簡単に出来ます。

→「カーソルをのせるとキランと画像を光らせるjQueryプラグイン「jQuery Gloss」」の続きを読む

簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」

Real Shadow

「Real Shadow」は要素に影を付けることができるjQueryプラグインです。カーソルの位置を光源としてカーソルの動きに合わせて影も動きます。

白を基調としたデザインのサイトで映えそうですね。

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

簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」サンプル

メニューに影をつけたり、アイコンや画像にちょっとしたアクセントを付けるときに良さそうです。

導入も簡単ですよ。

→「簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」」の続きを読む

虫眼鏡のように画像の一部を拡大ズームするjQueryプラグイン「Zoomy Jquery Plugin」

Zoomy Jquery Plugin

今回紹介するのは、画像の一部分を虫眼鏡を通したようにズームさせるjQueryプラグイン「Zoomy Jquery Plugin」です。

ネットショップの商品紹介の画像でも使われたりする機能ですね。商品の細かい部分まで伝えることができるようになります。演出的にも面白い機能です。

サンプルを作ってみました。こちらをどうぞ。

→ jQueryプラグイン「Zoomy Jquery Plugin」サンプル

設置の仕方も簡単で、処理も軽くスムーズです。

使い方は続きをご覧ください。

→「虫眼鏡のように画像の一部を拡大ズームするjQueryプラグイン「Zoomy Jquery Plugin」」の続きを読む

画像に立体感と奥行きのある動きを演出することができる『jQuery zLayers Parallax Plugin』

Photoshopなどのグラフィックソフトウェアなどに搭載されているレイヤー (Layer) とは、画像をセル画のように重ねて使うことができる機能です。

このレイヤーごとに動きを出すことで、アニメーション風に立体感を出すことが出来る便利なjQueryが 「jQuery zLayers Parallax Plugin」です。

サンプルを作ってみましたので、ご覧下さい。

→ 「jQuery zLayers Parallax Plugin」サンプル

→「画像に立体感と奥行きのある動きを演出することができる『jQuery zLayers Parallax Plugin』」の続きを読む