WEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」
TOP > WebDesign > WEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」 日本では互換性を重視する傾向がつよくまだあまり、特殊なフォントをjavascriptなどで作り出すような手法はスタンダードではありませんが、中には、挑戦的なサイトもあり、フォントをjsやCSSで見せるそんなサイトもあります。今日紹介するのはWEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」です。 FitText – A plugin for inflating web type フォントを加工するもの、テキストの組を特殊にしてくれるものなど、様々なフォント関連のjQueryプラグインが紹介されていますが、今回はその中から気にな
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate - かちびと.net
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" sr
表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL - かちびと.net
ちょっと気になってたjQueryプラグイン だったのでテストしてみました。表示 しているサイズに応じてレイアウトや フォントサイズを最適なものにしてく れる、というもの。Media Queryは使用 していないのでcssも綺麗に保てます。 場合によっては軽量化に繋がるかも、と思ったのでちょっとテストしてみたかったライブラリ。説明されてもあんまりピンとこないライブラリですけどｗなんというか、かゆいところに手が届く的なやつです。 このようにサイズを表示変えるとフォントサイズやdivの幅も指示通り変わってくれます。Media Query択一だと、どうしても面倒になってくることもあるので、こういうスクリプトも覚えておくと保険になるかもですね。スクリプトはたったの6KBですので軽量化にも役に立つかもしれません。 尚、IE6と7には対応していません。 日本語でも問題ありませんでした。以下サンプルどうぞ
指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」:phpspot開発日誌
FontSize | jQuery Plugins 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 特定のエレメントをクリックした際に、指定した要素のフォントサイズをUPさせることが可能。最大や最小のサイズも指定出来ます。 使い方は簡単で、必要なライブラリを読み込んだら次のように呼び出すだけです。 $(element).fontSizer({ action: "up", elements: "#content", max: 36 }); デモページはこちら コンテンツをどんどん大きくしていった例。maxを指定しておくと一定以上からサイズは大きくならなくなります。 エレメントを絞ることで、サイト全体のレイアウトが崩れることもありません。 ちょっとしたユーザビリティの向上に知っておいてもよさそうなプラグインですね。 関連エントリ コンピ
Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。:phpspot開発日誌
Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。 2011年03月09日- jQLabel jQuery Plugin - Create Beautiful Labels Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。 文字列を<span class="label">好きな文字</span>として囲えば次のように文字修飾できます。 ワードごとに色分けしてテキストを分かりやすくすることができそうです。 コードは次のように書きます。ワードと、その色を連想配列で定義してあげる感じです。 $(".label").jQLabel({"pointer":true, "labels":{ "awesome":"#FF9E00", "gmail":"#A65D03", "labels":"#A4977
指定したセレクタ内の文字サイズの拡大/縮小に超便利な「FontScale」:phpspot開発日誌
Plugins | jQuery Plugins 指定したセレクタ内の文字サイズの拡大/縮小に超便利な「FontScale」。 $(element).fontscale('p', 'up', {unit:'px', increment:1}); のように記述するだけで、element 内のフォントサイズが簡単に大きくできます。 upをdownに変えれば縮小させることが出来ます。3番目の引数で、単位と増加量を指定できるので細かな調整が可能。 文字を大きくする、小さくするといった操作を簡単に実装できてしまいます。 拡大・縮小の他にも、リセット機能があるので、大きくしすぎてしまっても安心です。 リセットする場合は、$(element).fontscale("p","reset"); のよう呼び出してあげるだけです。 関連エントリ コンピュータに指定フォントが入ってるかチェックできるjQueryプ
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ - かちびと.net
使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメニューは横に広がってくれます。 Horizontal Subnav Simple jQuery tabs コンテンツをタブで切
特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」:phpspot開発日誌
fontScaler marcup 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」。 次のように、特定のブロックを $(element).fontScaler() のように初期化するとボタンがあらわれ、拡大縮小が簡単になるプラグインがあるようです。 フォントを大きくするボタンをおしたところ。結構大きくなって読みやすくなりました。 次のように、段階を追って拡大、縮小ができるようにする機能もあります。 これはありそうでなかった気がします。 全体に適用するとデザインが崩れてしまって嫌だ、という方も、記事部分だけならデザインは崩れない＆可読性を上げることができるので便利ですね。 関連エントリ 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル フォントサイズの変更をJavaScriptによって検地する方法
JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」:phpspot開発日誌
JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 2009年07月07日- FontEffect jQuery plugin JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 ontEffect プラグインを使って、次のようなフォントを描画することが出来ます。画像ではないところが驚き。 実装の容易さについても注目で、次のように、FontEffect メソッドにオプションを渡すだけです。 $('#example24').FontEffect({ outline:true, // 枠線 outlineColor1:"#00c", // 枠線色１ outlineColor2:"#00c", // 枠線色２ outlineWeight:1, // 枠線幅 sha
コンピュータに指定フォントが入ってるかチェックできるjQueryプラグイン「jquery-fontavailable」:phpspot開発日誌
コンピュータに指定フォントが入ってるかチェックできるjQueryプラグイン「jquery-fontavailable」 2009年07月06日- jquery-fontavailable - Google Code コンピュータに指定フォントが入ってるかチェックできるjQueryプラグイン「jquery-fontavailable」。 ページの font-family でフォントタイプを指定したりしますが、そのフォントが入ってるかどうかを調べて挙動を変えることができるjQueryプラグインが存在するようです。 $(document).ready(function() { if($.fontAvailable('tahoma')) { // フォントが存在したら行う処理 } else { // フォントが存在しなかったら行う処理 } }); 動作のメカニズムとしては、まず、ダミーのhidde
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MopStudio
2007年度web制作者の為のまとめ再構築30選*ホームページを作る人のネタ帳