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プラグインがこの「Chosen」です。
セレクトボックスをプルダウンすると検索窓が表示され、そこからインスタンス検索が可能になります。選択する項目が増えるほど効力を発揮できそうですね。
動作は次のサンプルを見ていただいた方がわかりやすいと思います。
見た目もスタイリッシュになり、検索窓からリアルタイムに絞り込みできるのが嬉しいですね。
モーダルウィンドウというと、クリックするとポップアップで小窓が開いてそこにコンテンツが表示されるというイメージがありますが、このjQueryプラグイン「animatedModal.js」を使うと、小窓ではなくフルスクリーンでモーダルウィンドウが表示されます。
動きもにゅるっと、気持ちいい動きになっています。
フルスクリーンで表示されるので、モーダルで表示させたいコンテンツが多い時などに重宝しそうです。
サンプルを作ってみました。
動きは、サンプルを見ていただけるとわかると思います。
Roulette.jsは、画像をルーレット（スロット）のように回転させることができるjQueryプラグインです。
画像を数字に変更すれば、ビンゴっぽいのも作れるかも。
みてもらうのが一番早いと思うので、サンプルをご覧ください。
シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。
ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。
Drawer Slide Menu | jQuery plugin for responsive menu
Facebookなどスマホページでメニューアイコンをクリックすると、横からメニューがにゅるっと出てくるのがあります。これをドロワー(ナビゲーションドロワー)というそうです。
drawerというのは、英語で引き出しという意味。意味をきくと納得ですね〜。
そのドロワーを簡単に実装できるのがこのjQueryプラグイン「Drawer Slide Menu」です。設置の仕方も簡単です。
サンプルを作りましたので、ご覧いただけるとわかりやすいと思います。スマホからもPCからも動作が確認できます。
使い方も簡単。すぐに使えて動作も快適です。jQueryプラグイン「Drawer Slide Menu」の使い方は続きをご覧下さい。
→「スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」」の続きを読む
お問い合わせや申込フォームなどで、日付を入力してもらうことも多いと思います。そんなときに、カレンダーで日付をピックしてもらうようにすると大変便利ですよね。
そんなときに便利なのが、このカレンダーライブラリー「Rome」です。
サンプルを作ってみました。
日付だけでなく、時間との組み合わせ、または時間のみの入力も可能です。構成は2ファイルのみで、jQueryがなくても動きます。
使用方法は続きをどうぞ。
文章が長くなってしまったときなど、「続きを読む」などで文章を省略させて途中まで表示させたい場合があります。
その「続きを読む」が簡単に実装できて、リンクをクリックすると、残りの文章がアコーディオン式に表示されたり、非表示にしたりの動作を簡単に実装することができるのが、このjQueryプラグイン『jTruncSubstr』。
このjQueryプラグインは、『jTruncate』というjQueryプラグインをもとに日本語でもスムーズに使えるようにしてあります。ちなみに『jTruncate』は日本語ではダメ・・。
その動作はサンプルを見て頂いた方が早いと思います。
使い方は続きをご覧下さい。
→「アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』」の続きを読む
Audio Player: Responsive and Touch-Friendly
サイト上で音楽を流したいという場合に便利なjQueryオーディオプレーヤー用のプラグインです。
今や、スマホやタブレットなどタッチパネルでウェブをみるのは当たり前。
当然、レスポンシブでタッチフレンドリーなオーディオプレイヤーも必要になる場合がでてくるはずです。
HTML5から新しく追加された＜audio＞タグを使えば、サイト上で音楽を鳴らすのは簡単ですが、下のような感じでちょっと味気ない。
それを、レスポンシブでタッチフレンドリーでお洒落にと三拍子あわせてくれるjQueryプラグインがこの「Audio Player: Responsive and Touch-Friendly」です。
サンプルを作ってみました。ぜひスマホでも確認してみて下さい。
サンプルではコントロールバーをページの上部に設置していますが、下に設置してあげるとスマホとかだといい感じかなと思います。
設置方法も簡単なので、おすすめです。
→「audioタグをスマホフレンドリーでレスポンシブにカスタマイズする「Audio Player: Responsive and Touch-Friendly」jQueryプラグイン」の続きを読む
jQueryプラグイン「stickUp」はページの上部にメニューを固定して表示させることができるjQueryプラグインです。
ワンページスクロールサイトのみならず、縦長にコンテンツがあるページにメニューを固定させて表示させておくというのは、最近よく使われる手法です。
サンプルを作ってみましたので、みてもらうとわかりやすいと思います。
設置の仕方も簡単にできる便利なjQueryプラグインです。
今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。
このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。
サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。
スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。
→「スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン」の続きを読む
『rainyday.js』は、まるでガラス越しの風景に雨が降ってきたかのようなエフェクトを出すJavaScriptです。HTML5のcanvas機能が使われています。
とてもリアルなので見入ってしまうほど。サンプルを作ってみました。
・Internet Explorer 8 以降
・Firefox 23 以降
・Google Chrome 27 以降
・Safari 5.1
などのモダンブラウザで動きます。
この『rainyday.js』の使用方法は続きをご覧下さい。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑