Categoryテキスト

要素からはみ出したテキストを省略してくれるjQueryプラグイン「jQuery.dotdotdot」

jQuery.dotdotdot」はボックス要素からはみ出た分のテキストを自動的に省略してくれるという地味に便利なjQueryプラグインです。

省略したあとに「続きを読む」というリンクをつけることもできますので、ネットショップでの商品の一覧などボックス要素の高さをそろえて見た目をきれいにしたいときなどにも活躍しそうです。

下のリンクからサンプルをごらんください。

要素からはみ出したテキストを省略してくれるjQueryプラグイン「jQuery.dotdotdot」サンプル

要素に収まりきれずはみ出した部分を「…」に置き換えて省略してくれるので、プラグインの名前は「dotdotdot」なんでしょうね。導入もわりと簡単です。

→「要素からはみ出したテキストを省略してくれるjQueryプラグイン「jQuery.dotdotdot」」の続きを読む

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

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

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

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

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

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

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

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

コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」

Cheat Code

コナミコマンドというのは、ファミコンのゲームをはじめ様々なコンピューターゲームに登場する隠しコマンドのこと。ゲーム好きな方にはお馴染みですね。

ファミコンのグラディウスというシューティングゲームで、コントロールボタンから「上上下下左右左右BA」とコマンドを入力すると一瞬にしてオプションフル装備になるという裏ワザがありました。懐かしいですね。コナミコマンド初登場はこのファミコン版グラディウスだということです。

このコナミコマンド(隠しコマンド)を実装するサンプルを作ってみましたのでご覧下さい。

【コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」サンプル】

サンプルではキーボードの矢印キーから「↑↑↓↓←→←→」と入力してみて下さい。打ち間違えたらリロードしてまた試してみて下さい。

設置もすごく簡単です。使用方法は続きをどうぞ。

→「コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」」の続きを読む

Twitterをニコニコ動画風に流せるjQueryプラグイン「tweetDance.js」

tweetDance.js

画像にTwitter上のツィートをニコニコ動画風に流すという面白いjQueryプラグインが公開されていましたのでご紹介します。

画像の上に指定した検索キーワードを含むツィートをニコニコ動画のように流してくれます。

サンプルはこちら

「画像にツィートをニコニコ動画風に流せるjQueryプラグイン『tweetDance.js』サンプル」

この機能は、ネットショップでも面白い使い方ができそうな気がします。商品に関する感想などをTwitterから拾ってきて表示することでアピール力も増すのではないでしょうか。また画像をみてユーザーにハッシュタグをつけてツィートしてもらうという活用もできそうです。

設置もとても簡単ですのでチャレンジしてみて下さい。

→「Twitterをニコニコ動画風に流せるjQueryプラグイン「tweetDance.js」」の続きを読む

テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」

Sliding Letters with jQuery

「Sliding Letters with jQuery」を利用すると、マウスオーバー(テキストにカーソルを合わせたとき)にお洒落にテキストがが変化します。

ちょっと大胆なメニューやリンクテキストを強調させるのに使えそうです。少しHTMLとCSSがいじれれば簡単にアレンジができます。

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

→ テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル

ポートフォリオサイトだけでなく、美容室やサロンなどのおしゃれ系なサイトに活用できそうです。背景画像も設定できるので、イメージに合わせて背景画像も変えてみて下さい。

→「テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」」の続きを読む

折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」

PFold: Paper-Like Unfolding Effect

折りたたんだ紙を開いているようなアニメーションを見せることが出来るのが、このjQueryプラグイン「PFold」です。

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

→ 折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル

見た頂いたらわかると思いますが、立体的に紙が開いてコンテンツを表示します。
(残念ながら、IE8などCSS3に対応していない古いブラウザでは動作しません。)

オプション設定によっては色々な動きができますが、ここでは基本なものを説明します。

→「折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」」の続きを読む

まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」

今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。

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

→ jQueryプラグイン「jquery.jaticker.js」サンプル

設置方法も簡単です。使用方法は続きをご覧下さい。

→「まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」」の続きを読む

ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」

FitText

ブラウザのウィンドウズサイズ、またはiPhoneなどデバイスの画面の大きさに合わせてテキストの大きさを自動で調整してくれるのがこのjQuery「FitText」です。

ウィンドウズサイズにあわせて、文字が大きくなったり小さくなったりします。
サイトのタイトル表示に使えそうな機能です。

サンプルはこちらからどうぞ

→ ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」サンプル

また、こちらのサイトではうまく「FitText」を使用されています。このように主にタイトルに使う機会が多そうですね。→ Trent Walton’s blog (http://trentwalton.com)

「FitText」の使用方法は続きをどうぞ。

→「ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」」の続きを読む

テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」

テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。
テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すことができます。

しかも、導入はいたってシンプル簡単です。

サンプルページを作ってみました。ご覧ください。

→ テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」サンプル

日本語のテキストでもきちんと表示されていますね。

→「テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」」の続きを読む