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でWebを演出する初心者さん向きのテクニックを紹介します。
Web制作を行っていると、フッターの位置のバランスが悪く見栄えが悪くなることがあります。
例えば、コンテンツが少ないとフッターの下に大きく余白ができてしまったりする場合とかありませんか。
このCSSの方法を使えば、コンテンツの量が多いページはスクロールの一番下にフッターを表示し、コンテンツが少なくてスクロールがない場合でも画面の一番下にフッターを表示させることができます。
上の二つのサンプルを比べてみていただくとわかると思います。
「GIRLY DROP（ガーリードロップ）」は、フリー写真素材サイトです。可愛いけど甘すぎない画像をダウンロードできます。
商用・個人利用に関わらず、ガーリーな写真をすべて無料で使うことができます。
どれも本当に無料！？というほどクォリティーが高い！
女子力満載のカテゴリーがあります。ここで紹介しているのはほんの一握り。
タイトルのつけ方もおしゃれで、面白いですね。
→「女の子向けの可愛いフリー画像素材がいっぱい。クレジット不要・商用利用可能の「GIRLY DROP（ガーリードロップ）」」の続きを読む
フォームなどでよく使われるセレクトボックスですが、デフォルトのままで使うことが多いと思います。
そのセレクトボックスをもっと使いやすくカスタマイズしてくれる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プラグイン」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑