テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQ
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライド
Lightbox.js のような写真のスライドショーするライブラリ沢山：Goodpic
This shop will be powered by Are you the store owner? Log in here
Lightbox2～サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示させる＜Ajax｜Lightbox＞
サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する ［Lightbox v2.05 旧版］ サンプル｜使用方法｜Lightboxのダウンロード｜Lightboxのカスタマイズ（応用編） Lightbox2は、 サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページに、拡大画像をオーバーレイ表示します。 Lightbox2は、「１枚の画像」または「複数画像のグループ」を表示する２つの方法があります。 だだし、スライドショー、大きな画像を画面に合わせて表示や画像を別ウィンドーに表示などができません。 これらを望むには、Piroboxを薦めます。また、Lightbox 2 WordPress Plugin 日本語版については、このサイトを参照。 なお、Lightbox v2.05 旧版は、現在Lightbox2サイトのここからダウンロー
Lightbox 2
Overview Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pants transitions Backwards Compatibility: yes! How to Use Part 1 - Setup Lightbox 2 uses the Prototype Framework and Scriptaculous Effe
50超のCSSやJavaScriptで実装するタブ型ナビゲーション集
HONGKIAT.COMのエントリー「50超のCSSやJavaScriptで実装するタブ型ナビゲーション集」から、当サイトで紹介したことのないものをいくつか紹介します。 50+ Nice Clean CSS Tab-Based Navigation Scripts
JavaScript/DOM » JavaScript小技集 » ホバーウィンドウ | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説ホバーウィンドウ ホバーウィンドウは、Webページが完全に読込完了時にスタイルシートで隠していた要素をページの最上部に、JavaScriptを使って 表示する擬似ウィンドウのことです。別名、スクロールウィンドウ、ドロップインウィンドウとも呼ばれています。 ホバーウィンドウは、ポップアップウィンドウと違い、別ウィンドウを立ち上げないため、 ブラウザのポップアップブロックに引っかかりません。 ユーザーがサイトにアクセスして際に、ホバーウィンドウを表示してメルマガ登録を促したり、広告を表示したり、様々な使い道があります。 ホバーウィンドウ表示のスクリプトは、以下のサイトから無料で入手できます。 参照元：Dyanmic Drive DHTML Scripts
Flashが無くてもアニメーションしたい人のためのjQueryプラグイン「jQuery.spritely」 | Web活メモ帳
「jQuery.spritely」はHTMLとJavaScriptでアニメーションさせる事ができるプラグインです。CSSスプライトを使用して構築されており、Flashが使えないiPhoneやiPad向けのためにもチェックしておくべきかもしれません。 詳しくは以下 スクロールする背景画像 一枚の画像をスクロールさせる事でアニメーションを実現させているようですね。 公式サイトでは、以下の画像を使用していました。 コードもシンプルに１行で実装できるようです。 $('#bird').sprite({fps: 12, no_of_frames: 3}); 以下のブラウザで動作するようです。 Internet Explorer 6 + Firefox Safari Chrome Opera アニメーションを入れる事でユーザビリティーが低下しないよう、利用場所には注意してください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで画像にマウスオーバーした際見出しをスライド表示する | CSS Lecture
CSS Lecture: LightBoxのJQuery版 jQuery lightBox plugin
Kyubey | CSS3 demo page | sebadorn
Amazon.co.jp: Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL): 西畑一馬: 本