div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」
高機能過ぎるjQueryスライドショー「Camera slideshow」
ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」
シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
クリックすると横からメニューが現れるjQueryプラグイン『Sidr』
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』
クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』
ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」
ZooMoveは、マウスオーバーで画像を拡大させてみせることができるjQueryプラグインです。
画像を一部を詳細に見せたいときなどに効果的。この動きは、ネットショップの商品紹介の画像でもよく使われる機能ですね。
こちらのjQueryプラグイン「ZooMove」を利用すると、拡大させる動きも滑らかで、ストレスなく見せることができます。
動きはサンプルをこちらのご覧いただくとわかりやすいと思います。
ググってみましたが、まだjQueryプラグイン「ZooMove」は日本語では紹介されていませんでした。
でも、使いやすいのでこれから日本でも使われる機会が増えそうな気がします。
画像にカーソルを合わせると画像が変わるというという効果を「ロールオーバー」といいます。
メニューやカートに入れるなどのボタンでもよく使われていますね。
画像のロールオーバーはCSSやJavaScript（jQuery）を使用して実装することができますが、「smoothRollOver.js」というjQueryプラグインを使用すると、比較的カンタンに実装できる上にロールオーバー効果をなめらかにすることが出来るようです。
今回は、jQueryのみのロールオーバー時と「smoothRollOver.js」プラグインを利用したロールオーバー時がどの程度違うかを比較するために、実装方法も合わせて説明したいと思います。
まずはサンプルを作ってみました。
好みもあると思いますので、好みやデザインに合わせて使い分けたいですね。
それぞれの設定方法は続きをご覧下さい。
→「画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。」の続きを読む
画像にTwitter上のツィートをニコニコ動画風に流すという面白いjQueryプラグインが公開されていましたのでご紹介します。
画像の上に指定した検索キーワードを含むツィートをニコニコ動画のように流してくれます。
サンプルはこちら
この機能は、ネットショップでも面白い使い方ができそうな気がします。商品に関する感想などをTwitterから拾ってきて表示することでアピール力も増すのではないでしょうか。また画像をみてユーザーにハッシュタグをつけてツィートしてもらうという活用もできそうです。
設置もとても簡単ですのでチャレンジしてみて下さい。
ビフォー・アフターを画像でわかりやすくみせることが出来るのがこの「jQuery Before/After Plugin」です。たとえば、化粧品の使用前使用後の写真、ダイエット前ダイエット後の写真、家のリフォーム前リフォーム後の写真など同じアングルの写真を比べて見て欲しいときに便利です。
サンプルを作ってみました。
ただ写真を並べて紹介するよりも、印象が強くなりますね。ネットショップでも活用できそうです。
→「ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」」の続きを読む
画像にマウスオーバーするとキランと光ったような効果が出せるのが、jQueryプラグイン「jQuery Gloss」です。
クリスマスのムードのこの時期。トップ画像やバナー画像などで、ちょっと目を引くこの効果を利用すると良いのではないでしょうか？
サンプルはこちら
ファイルのサイズも２ｋ程度で軽く、設置も簡単に出来ます。
「Real Shadow」は要素に影を付けることができるjQueryプラグインです。カーソルの位置を光源としてカーソルの動きに合わせて影も動きます。
白を基調としたデザインのサイトで映えそうですね。
サンプルを作ってみました。
メニューに影をつけたり、アイコンや画像にちょっとしたアクセントを付けるときに良さそうです。
導入も簡単ですよ。
今回紹介するのは、画像の一部分を虫眼鏡を通したようにズームさせるjQueryプラグイン「Zoomy Jquery Plugin」です。
ネットショップの商品紹介の画像でも使われたりする機能ですね。商品の細かい部分まで伝えることができるようになります。演出的にも面白い機能です。
サンプルを作ってみました。こちらをどうぞ。
設置の仕方も簡単で、処理も軽くスムーズです。
使い方は続きをご覧ください。
→「虫眼鏡のように画像の一部を拡大ズームするjQueryプラグイン「Zoomy Jquery Plugin」」の続きを読む
Photoshopなどのグラフィックソフトウェアなどに搭載されているレイヤー (Layer) とは、画像をセル画のように重ねて使うことができる機能です。
このレイヤーごとに動きを出すことで、アニメーション風に立体感を出すことが出来る便利なjQueryが 「jQuery zLayers Parallax Plugin」です。
サンプルを作ってみましたので、ご覧下さい。
→「画像に立体感と奥行きのある動きを演出することができる『jQuery zLayers Parallax Plugin』」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑