Lazyload Images image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload Images」。 次のようにコードを書いて、画像が画面内に入った時の処理を入れられます。関数なので自由度が高く、他のlazyloaderよりも好みのエフェクトが作れそう 関連エントリ Googleマップを遅延ロードしてページ読込速度を上げてくれるjQueryプラグイン「Lazy-loading」
image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload Images」:phpspot開発日誌
Lazyload Images image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload Images」。 次のようにコードを書いて、画像が画面内に入った時の処理を入れられます。関数なので自由度が高く、他のlazyloaderよりも好みのエフェクトが作れそう 関連エントリ Googleマップを遅延ロードしてページ読込速度を上げてくれるjQueryプラグイン「Lazy-loading」
Pegasus
Pegasus is a simple JavaScript solution to improve your average time to display data. Use it for static sites or when you can't do server-side data bootstrapping / rendering. Works in all major browsers and IE9+
要素内のテキストをはみ出さず、JSで「...」で省略してくれる「jQuery.dotdotdot」:phpspot開発日誌
jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content. 要素内のテキストをはみ出さず、JSで「...」で省略してくれる「jQuery.dotdotdot」。 次のように、はみだしたテキストを...で綺麗に要素内に収めてくれます。はみ出しているとカッコ悪いですが、サーバ側でこれをやるのはなかなか難しい。 JSなら綺麗にできますね。Read Moreみたいなテキストをつけることもできるみたい 関連エントリ フロートラベルを実装できるjQueryプラグイン「FlowupLabels.js」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 階層的なスケジュール表示ができて便利なjQueryプラグイン「GraspSchedule.js」
スムーズな色切替アニメーションが実現できる「sweep.js」:phpspot開発日誌
座席番号の予約機能などに使えそうなjQueryプラグイン「jQuery-Seat-Charts... 次の記事 ≫：AppleWatchをコンセプトとしたPSDファイル
ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」:phpspot開発日誌
PgwBrowser - Browser & OS / platform detection plugin for jQuery / Zepto ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」。 次のようにJSON値でブラウザ、OS、viewport情報を受け取れます。iOS、Androidなどにも対応 関連エントリ ブラウザ上で動くイラストレーターのOSS「mondrian」 SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」 ChromeのタブっぽいUIをブラウザ上で実現する「ChromeTabs」
エレメント内にテキストをレスポンシブに埋め込められる「textsive」:phpspot開発日誌
midnightviking/textsive GitHub エレメント内にテキストをレスポンシブに埋め込められる「textsive」 画面サイズをかえても画面にテキストをフルで表示したい場合に使えます 最大、最小のフォントサイズの指定も可能。文字だけで迫力あるページを作る際に便利そうですね 関連エントリ ブロック要素の高さをレスポンシブに揃えられる「jquery-match-height」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」 フラットでレスポンシブなギャラリー実装jQueryプラグイン「lightGallery」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」
背景画像を指定要素のサイズにフィットさせられる「jquery.background-fit」:phpspot開発日誌
thingsym/jquery.background-fit GitHub 背景画像を指定要素のサイズにフィットさせられる「jquery.background-fit」。 通常背景画像を設定すると要素サイズに関わらずリサイズすることは難しかったですが、こちらのプラグインを使えば簡単。 画面サイズを変更したとしても背景がフィットし、レスポンシブなデザインにも使えそうです 関連エントリ 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 オシャレでモダンな背景画像パターン集「The Pattern Library」 かっこいい黒のリアルなカーテンっぽい背景画像をSVG描画できる「waterpipe.js」
文字列を色コードに変換できるjQueryプラグイン「String to Color」:phpspot開発日誌
String to Color jQuery plugin 文字列を色コードに変換できるjQueryプラグイン「String to Color」。 $.string_to_color("文字列");として#xxxxxx形式のカラーを取得できるプラグイン。意味のある色にしてくれるわけではありませんが、md5等でhashを求めるようなイメージでカラーコードが生成できます。 WEBサービスなどで、ユーザの色をidなどから生成してユーザのベースカラーにしちゃう、なんていう使い方をすると面白いかも。 関連エントリ 類似色で色をランダムに生成できるJS「randomColor.js」 文字列を分割して複数の色でストライプにカラーリングできる「Splitchar」 HTMLの色をミックスしたり、色にフィルタをかけたりして操作できるjQueryプラグイン「xcolor」
SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」:phpspot開発日誌
SVGMagic - Great jQuery SVG fallback plugin SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」 ブラウザが対応していなければPNG画像に変換して出力ができます。これである程度は気兼ねなくSVGを使えるという感じでしょうか。 初期化を次のようにおこなっておけば、自動変換してくれます。ｊsファイル内に定義しちゃってもいいのかも 関連エントリ Snap.svgを使ったSVGアイコンアニメーションのデモがカッコいい 色々なデザイナーの高品質なSVGアイコンがDLできる「iconmelon」 SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」 美しいSVG背景パターンギャラリー「SVG Patterns Gallery」
ハードディスクはどこのメーカー製が一番壊れにくいのかが2万5000台の調査結果でついに明らかに
By epSos .de ハードディスク(HDD)の寿命傾向や価格の展望を業務上で蓄積されたデータから発表してきたオンラインストレージサービスを提供するBackblaze社が今回新たにメーカー別のHDDの壊れやすさに関するデータを公開しました。 Backblaze Blog » What Hard Drive Should I Buy? http://blog.backblaze.com/2014/01/21/what-hard-drive-should-i-buy/ 今回比較したのはSeagate・Western Digital(WD)・日立の3メーカー。データは、2万5000台以上のHDDの調査結果から算出されているとのこと。 これが具体的なHDDのメーカー別の数字。東芝製・サムスン製については母数が少ないため今回は検討から除外しています。 なお、今回のデータの基になった、Backbl
文中のURLを自動でリンクしてくれるjQueryプラグイン「Linkify」:phpspot開発日誌
Linkify - a jQuery plugin by @SoapBoxHQ 文中のURLを自動でリンクしてくれるjQueryプラグイン「Linkify」 サーバサイドで自動リンクするような処理はよくありますが、jQueryプラグインでクライアントサイドのCPUを使って自動リンクできるという便利なプラグインです。 初期化すれば簡単に簡単にリンク化されます。httpがはいってなくてもドメインぽいものは全て変換されるようです 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン ランダムに動く面白テキスト実装jQueryプラグイン「funnyText.js」 jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDi
画像の親エレメントの背景を画像のカラーに合わせられるjQueryプラグイン「adaptive-backgrounds」:phpspot開発日誌
画像の親エレメントの背景を画像のカラーに合わせられるjQueryプラグイン「adaptive-backgrounds」 2013年12月25日- jquery.adaptive-backgrounds.js ? A jQuery plugin for extracting dominant colors from images and applying it to its parent 画像の親エレメントの背景を画像のカラーに合わせられるjQueryプラグイン「adaptive-backgrounds」。 画面サイズに合わせて画像を拡大縮小というのはよくありますが、画像の色を取って、その色を親要素の背景に合わせるというプラグインははじめてかも。 画像の背景色を画像と合わせることで統一感というか、違和感のない感じに仕上がるようです。動的にやれるのでCGM的なサイトなんかでも使えるのかも。 c
単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」:phpspot開発日誌
Echo.js, simple JavaScript image lazy loading 単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」。 スクロールがいってはじめて画像を読み込むライブラリ。jQueryなどに依存せず、軽量。 空の画像をsrcに設定しておきつつdata-echoでソースを指定するだけです。 読込中の画像にはローディングアニメーションもついてます 関連エントリ LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」
画面上にエレメントが表示された際のイベントハンドラを設定できる「onScreen()」:phpspot開発日誌
$.onScreen(); 画面上にエレメントが表示された際のイベントハンドラを設定できる「onScreen()」 1ページに沢山のコンテンツを読み込んでいるサイトにおいては、その画面が表示されないでもHTMLを出力し、転送量を必要とし、表示スピードに影響を及ぼします。 そのエレメントがスクリーンに表示された時点で、コンテンツを表示するように設計すれば無駄な転送がなくなり、スピードも速くなりますね。 これを簡単に実現できるのが、このライブラリです。 実装は次のように、初期化します。doIn, doOut という感じで関数内に定義すればよいみたいです。 lazyloaderや、ページの自動読込、更に、利用者がどこまで見たか？をトラックする場合にもAnalytics等と組み合わせて使えそう。 関連エントリ ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
指定した要素にローディング等オーバーレイ効果を付けられるjQueryプラグイン「plainOverlay」:phpspot開発日誌
ヒートマップが簡単に描画できるライブラリ「heatmap.js」:phpspot開発日誌
好きなサイズの画像サムネイルが生成できる「jQThumb」:phpspot開発日誌
ページ内の文字をハイライトさせることができるjQueryプラグイン「FilteringHighlight」:phpspot開発日誌
画像上にキャプションをアニメーション表示するCSSサンプル集:phpspot開発日誌
ドメイン名の空きをチョッ速検索できる「domize」:phpspot開発日誌