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」
今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。
最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。
設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。
サンプルを作ってみました。
各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。
Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。
今や定番となっている「スクロールアップ」ボタン。スクロールしているとあらわれて、クリックするとトップへするするとスクロールしてくれるというボタンです。
インターネットで検索すると様々な「スクロールアップ」ボタンを見つけることができて、迷ってしまいます。
いろいろなシーンに合わせて簡単に利用できて、エフェクトも綺麗なjQueryプラグイン「scrollUp jQuery plugin」がオススメです。
サンプルを作ってみました。
今のホームページにそのまま組み込むだけで、「スクロールアップ」ボタンの設置が出来ますのでとても簡単で便利です。
設置方法は続きをどうぞ。
→「上（トップ）へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」」の続きを読む
画像にカーソルを合わせると画像が変わるというという効果を「ロールオーバー」といいます。
メニューやカートに入れるなどのボタンでもよく使われていますね。
画像のロールオーバーはCSSやJavaScript（jQuery）を使用して実装することができますが、「smoothRollOver.js」というjQueryプラグインを使用すると、比較的カンタンに実装できる上にロールオーバー効果をなめらかにすることが出来るようです。
今回は、jQueryのみのロールオーバー時と「smoothRollOver.js」プラグインを利用したロールオーバー時がどの程度違うかを比較するために、実装方法も合わせて説明したいと思います。
まずはサンプルを作ってみました。
好みもあると思いますので、好みやデザインに合わせて使い分けたいですね。
それぞれの設定方法は続きをご覧下さい。
→「画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。」の続きを読む
サイドバー風のナビゲーションパーツをスクロールさせても一定の場所に固定してくれるのが、このjQueryプラグイン『stickyMojo』です。動作も軽くスムーズで、違和感がない固定のサイドナビゲーションが実装できるので便利です。
サンプルを作ってみました。
フッターのコンテンツまでくると、フッターと重ならないように調整してくれますね。このように画面をリサイズしてもメインコンテンツと重ならない、またフッターコンテンツと重ならないように固定できます。
設置の仕方も簡単です。
→「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」の続きを読む
高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。
サンプルを作ってみました。ご覧下さい。
フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。
今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。（めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。）
では、サンプルを作ってみましたのでご覧下さい。
最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。
→「めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』」の続きを読む
ボタンなど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」をフルスクリーンで背景にする方法）
軽くて使いやすいですので、どの画像ギャラリースライダーを使おうか迷った時の選択肢のひとつに良いと思います。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑