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」
ボタンなどCSSで作った影のついたボックスにアニメーションの効果をつけれるのが、この『Shadow animation jQuery plugin』です。
この『Shadow animation jQuery plugin』はCSS3 box-shadow プロパティのボックスへ影を付ける効果を拡張してアニメーション化してくれるものです。
サンプルをご覧下さい。
最新のブラウザに対応しています。
→「影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』」の続きを読む
今回紹介するのは、画像ファイルをアップロードして表示することができる『jQuery File Upload』です。
ドラッグ・アンド・ドロップにも対応していて、アップロード中のプログレスバーの表示やアップロードされた画像のプレビューも可能です。
必要なファイルがパッケージ化されているので、ほとんどそのまま使用できます。
※他人のパソコンからファイルをサーバーにアップすることができるものです。セキュリティー対策は充分に行なって下さい。
今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。
サンプルをみてもらうとわかりやすいと思います。
レスポンシブ対応のドロップダウンメニューですので、スマホなどでも綺麗に表示されます。jQueryプラグインは使用していません。
→「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』」の続きを読む
「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。
デフォルトの状態でも十分に機能しますが、スキンやエフェクト、メーターの種類やナビゲーション、画像別に見せる時間を変えるなど様々な設定が可能です。
また、レスポンシブ対応しています。設定によってはフルスクリーンでのスライドショーを背景に設定することもできます。動画を組み込むことも可能です。
サンプルを作ってみました。
（追加記事：jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法）
軽くて使いやすいですので、どの画像ギャラリースライダーを使おうか迷った時の選択肢のひとつに良いと思います。
画像にTwitter上のツィートをニコニコ動画風に流すという面白いjQueryプラグインが公開されていましたのでご紹介します。
画像の上に指定した検索キーワードを含むツィートをニコニコ動画のように流してくれます。
サンプルはこちら
この機能は、ネットショップでも面白い使い方ができそうな気がします。商品に関する感想などをTwitterから拾ってきて表示することでアピール力も増すのではないでしょうか。また画像をみてユーザーにハッシュタグをつけてツィートしてもらうという活用もできそうです。
設置もとても簡単ですのでチャレンジしてみて下さい。
今回は、新しいオンライン書店のサイトにも応用できそうなリアルな本のショーケースの紹介です。本の情報とともに、立体的にリアルな動きの本が表示され、印象的な演出が実現できます。
ユーザーに新しい体験をしてもらうことで、紹介している本に興味を持ってもらえるような個性的なオンライン書店のサイトが作成できるかもしれません。
サンプルを作ってみました。
※古いブラウザでは正しく動作しませんので、ご注意下さい。
（サンプルの本の表紙などは、サンプル用にオリジナルで製作していますので、このような表紙の本は実在しません。「葉隠」「武士道」「五輪書」の本自体は様々な出版社から出ています。）
本のショーケースになっているソース部分の仕組みが理解できると、導入は難しくないです。レスポンシブ対応になっているので、色々な画面サイズで自然に閲覧できるのも嬉しいですね。
→「リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」」の続きを読む
Animated Responsive Image Grid
画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。
レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。
サンプルを見て頂くとわかりやすいと思います。
オプションを変更することで、多彩なエフェクト効果が可能になっています。
→「タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」」の続きを読む
jQueryプラグイン「Overscroll」は、ブラウザでiPhoneやiPadのスクロールのような動きを再現させることができます。
サンプルを作ってみました。
設置も簡単にできますので、見せ方次第では面白い使い方が出来るのではないでしょうか？
→「ブラウザでiPhoneやiPadのようなスクロールを実現させるjQueryプラグイン「Overscroll」」の続きを読む
ビフォー・アフターを画像でわかりやすくみせることが出来るのがこの「jQuery Before/After Plugin」です。たとえば、化粧品の使用前使用後の写真、ダイエット前ダイエット後の写真、家のリフォーム前リフォーム後の写真など同じアングルの写真を比べて見て欲しいときに便利です。
サンプルを作ってみました。
ただ写真を並べて紹介するよりも、印象が強くなりますね。ネットショップでも活用できそうです。
→「ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」」の続きを読む
テキストにマウスオーバーすると、facebookやTwitterのプロフィールを取得して表示してくれるのがこのjQueryプラグイン「Hovercard」です。
facebookやTwitterでなくても、任意のテキストなどの情報を表示させることもできます。
サンプルを作ってみました。
ユーザーＩＤを指定してあげるだけで表示してくれるので、設置してしまえば簡単に利用できます。
→「facebookやTwitterのプロフィールをマウスオーバーして表示させるjQueryプラグイン「Hovercard」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑