Authorpannyatto

カーソルを乗せると画像が拡大するjQueryプラグイン「ZooMove」

ZooMove

ZooMoveは、マウスオーバーで画像を拡大させてみせることができるjQueryプラグインです。

画像を一部を詳細に見せたいときなどに効果的。この動きは、ネットショップの商品紹介の画像でもよく使われる機能ですね。

こちらのjQueryプラグイン「ZooMove」を利用すると、拡大させる動きも滑らかで、ストレスなく見せることができます。

動きはサンプルをこちらのご覧いただくとわかりやすいと思います。

カーソルを乗せると画像が拡大するjQueryプラグイン「ZooMove」サンプル

ググってみましたが、まだjQueryプラグイン「ZooMove」は日本語では紹介されていませんでした。

でも、使いやすいのでこれから日本でも使われる機会が増えそうな気がします。

→「カーソルを乗せると画像が拡大するjQueryプラグイン「ZooMove」」の続きを読む

【CSS】コンテンツが少なくても画面の一番下に配置されるフッターサンプル

今回はCSSでWebを演出する初心者さん向きのテクニックを紹介します。

Web制作を行っていると、フッターの位置のバランスが悪く見栄えが悪くなることがあります。

例えば、コンテンツが少ないとフッターの下に大きく余白ができてしまったりする場合とかありませんか。

memo

このCSSの方法を使えば、コンテンツの量が多いページはスクロールの一番下にフッターを表示し、コンテンツが少なくてスクロールがない場合でも画面の一番下にフッターを表示させることができます。

コンテンツが少なくても画面の一番下に配置されるフッターサンプル(コンテンツ量が少ない場合)

コンテンツが少なくても画面の一番下に配置されるフッターサンプル(コンテンツ量が多い場合)

上の二つのサンプルを比べてみていただくとわかると思います。

→「【CSS】コンテンツが少なくても画面の一番下に配置されるフッターサンプル」の続きを読む

女の子向けの可愛いフリー画像素材がいっぱい。クレジット不要・商用利用可能の「GIRLY DROP(ガーリードロップ)」

GIRLY DROP(ガーリードロップ)」は、フリー写真素材サイトです。可愛いけど甘すぎない画像をダウンロードできます。

商用・個人利用に関わらず、ガーリーな写真をすべて無料で使うことができます。

どれも本当に無料!?というほどクォリティーが高い!

女子力満載のカテゴリーがあります。ここで紹介しているのはほんの一握り。

タイトルのつけ方もおしゃれで、面白いですね。

→「女の子向けの可愛いフリー画像素材がいっぱい。クレジット不要・商用利用可能の「GIRLY DROP(ガーリードロップ)」」の続きを読む

セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」

Chosen

フォームなどでよく使われるセレクトボックスですが、デフォルトのままで使うことが多いと思います。

そのセレクトボックスをもっと使いやすくカスタマイズしてくれるjQueryプラグインがこの「Chosen」です。

セレクトボックスをプルダウンすると検索窓が表示され、そこからインスタンス検索が可能になります。選択する項目が増えるほど効力を発揮できそうですね。

動作は次のサンプルを見ていただいた方がわかりやすいと思います。

セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」のサンプル

見た目もスタイリッシュになり、検索窓からリアルタイムに絞り込みできるのが嬉しいですね。

→「セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」」の続きを読む

モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」

モーダルウィンドウというと、クリックするとポップアップで小窓が開いてそこにコンテンツが表示されるというイメージがありますが、このjQueryプラグイン「animatedModal.js」を使うと、小窓ではなくフルスクリーンでモーダルウィンドウが表示されます。

動きもにゅるっと、気持ちいい動きになっています。

フルスクリーンで表示されるので、モーダルで表示させたいコンテンツが多い時などに重宝しそうです。

サンプルを作ってみました。

⇒ モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」サンプル

動きは、サンプルを見ていただけるとわかると思います。

→「モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」」の続きを読む

ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」

Roulette.js

Roulette.jsは、画像をルーレット(スロット)のように回転させることができるjQueryプラグインです。

画像を数字に変更すれば、ビンゴっぽいのも作れるかも。

みてもらうのが一番早いと思うので、サンプルをご覧ください。

→ ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル

シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。

ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。

→「ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」」の続きを読む

スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」

Drawer Slide Menu | jQuery plugin for responsive menu

Facebookなどスマホページでメニューアイコンをクリックすると、横からメニューがにゅるっと出てくるのがあります。これをドロワー(ナビゲーションドロワー)というそうです。

drawerというのは、英語で引き出しという意味。意味をきくと納得ですね〜。

そのドロワーを簡単に実装できるのがこのjQueryプラグイン「Drawer Slide Menu」です。設置の仕方も簡単です。

サンプルを作りましたので、ご覧いただけるとわかりやすいと思います。スマホからもPCからも動作が確認できます。

⇒ スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル

使い方も簡単。すぐに使えて動作も快適です。jQueryプラグイン「Drawer Slide Menu」の使い方は続きをご覧下さい。

→「スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」」の続きを読む

フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」

Rome

お問い合わせや申込フォームなどで、日付を入力してもらうことも多いと思います。そんなときに、カレンダーで日付をピックしてもらうようにすると大変便利ですよね。

そんなときに便利なのが、このカレンダーライブラリー「Rome」です。

サンプルを作ってみました。

フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」サンプル

日付だけでなく、時間との組み合わせ、または時間のみの入力も可能です。構成は2ファイルのみで、jQueryがなくても動きます。

使用方法は続きをどうぞ。

→「フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」」の続きを読む

アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』

文章が長くなってしまったときなど、「続きを読む」などで文章を省略させて途中まで表示させたい場合があります。

その「続きを読む」が簡単に実装できて、リンクをクリックすると、残りの文章がアコーディオン式に表示されたり、非表示にしたりの動作を簡単に実装することができるのが、このjQueryプラグイン『jTruncSubstr』。

このjQueryプラグインは、『jTruncate』というjQueryプラグインをもとに日本語でもスムーズに使えるようにしてあります。ちなみに『jTruncate』は日本語ではダメ・・。

その動作はサンプルを見て頂いた方が早いと思います。

⇒ アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』

使い方は続きをご覧下さい。

→「アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』」の続きを読む

audioタグをスマホフレンドリーでレスポンシブにカスタマイズする「Audio Player: Responsive and Touch-Friendly」jQueryプラグイン

Audio Player: Responsive and Touch-Friendly

サイト上で音楽を流したいという場合に便利なjQueryオーディオプレーヤー用のプラグインです。

今や、スマホやタブレットなどタッチパネルでウェブをみるのは当たり前。

当然、レスポンシブでタッチフレンドリーなオーディオプレイヤーも必要になる場合がでてくるはずです。

HTML5から新しく追加された<audio>タグを使えば、サイト上で音楽を鳴らすのは簡単ですが、下のような感じでちょっと味気ない。

スクリーンショット 2014-10-15 10.48.47

それを、レスポンシブでタッチフレンドリーでお洒落にと三拍子あわせてくれるjQueryプラグインがこの「Audio Player: Responsive and Touch-Friendly」です。

サンプルを作ってみました。ぜひスマホでも確認してみて下さい。

⇒ audioタグをスマホフレンドリーでレスポンシブにカスタマイズする「Audio Player: Responsive and Touch-Friendly」jQueryプラグインサンプル

サンプルではコントロールバーをページの上部に設置していますが、下に設置してあげるとスマホとかだといい感じかなと思います。

設置方法も簡単なので、おすすめです。

→「audioタグをスマホフレンドリーでレスポンシブにカスタマイズする「Audio Player: Responsive and Touch-Friendly」jQueryプラグイン」の続きを読む