拡大縮小、フルスクリーン、スライド等フル機能のモダンなlightbox「lig... 次の記事 ≫：SVGを使ったアニメーションがクールなスライド実装サンプル
壊れたテレビ風のグリッチエフェクトを全ての要素にかけられるjQueryプラグイン:phpspot開発日誌
拡大縮小、フルスクリーン、スライド等フル機能のモダンなlightbox「lig... 次の記事 ≫：SVGを使ったアニメーションがクールなスライド実装サンプル
マスクを設定して入力に制限をかけられる「jQuery Mask Plugin」:phpspot開発日誌
jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements. マスクを設定して入力に制限をかけられる「jQuery Mask Plugin」 日付、電話番号等の細かなマスクを設定してValidation以前に入力を制限することが可能です。 <input type="text" name="field-name" data-mask="00/00/0000" data-mask-selectonfocus="true" /> のようにしてマスク指定が可能で、非常に簡単に扱える他、JSコードでの非常に細かなフィルタにも対応 関連エントリ クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate
アニメーションするプログレスバーを実装できるjQueryプラグイン「barIndicator」:phpspot開発日誌
kapantzak/barIndicator GitHub デモ アニメーションするプログレスバーを実装できるjQueryプラグイン「barIndicator」。 次のようにデザインがシンプルで使いやすそうなのが特徴です 関連エントリ カラフルで新しいスクロールバーを実装できる「ScrollMenu.js」 流行りのYoutube風ローディングバー実装jQueryプラグイン スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 フラットデザインでレスポンシブなプログレスバー作成「ProgressBar.js」
流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集:phpspot開発日誌
Page Scroll Effects | CodyHouse 流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集がダウンロード可能です。 パララックス効果や3D効果など、クオリティの高いものばかりでかなり使えそう。最近流行りのページ作成に役立てられそうです 一昔前にここまでスクロール型ページが流行るとは思いませんでしたが、正直どうなるか分からないものですね 関連エントリ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 スマホの傾きでページスクロール出来るようにする「Interdimensional」 スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 固定要素をスクロール位置によって切り替えられる「Midnight.js」
ブロック等のレイアウトの歯抜けを調整して綺麗にしてくれる「layout-balancer」:phpspot開発日誌
PebbleRoad/layout-balancer GitHub ブロック等のレイアウトの歯抜けを調整して綺麗にしてくれる「layout-balancer」 ブロックを並べるレイアウト、だけど、コンテンツが足りなくてカッコ悪い、ということはよく起こりうることですね。 こちらのプラグインで、次のようにレイアウトしてくれます。 ライザップのCMばりにカッコよく調整してくれます。 関連エントリ Bootstrapなサイトでグリッドを描画してレイアウトの参考にできる「jQDrawBootstrapGrid」 よく使われている７２種のレイアウトが詰まった「UI Tiles」 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」
粒子がバーストする感じのアニメーションを作れる「jquery.particles.burst」:phpspot開発日誌
Glideh/jquery.particles.burst GitHub 粒子がバーストする感じのアニメーションを作れる「jquery.particles.burst」 画像を用意すればファンシーなエフェクトが簡単に作れるみたいです。 機能よりもUIな時代なので覚えておいてもよさそうですね 関連エントリ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 テキストをCSSやSVG等でアニメーションさせるやばいサンプル集 軽量＆多機能なアニメーションエンジン「jQueryTween」 タグの属性に値を定義するだけでアニメーションさせられる「Animatr」 ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」
円、線、棒グラフを描画できるシンプルなチャートライブラリ「cssCharts.js」:phpspot開発日誌
sultantarimo/cssCharts.js GitHub 円、線、棒グラフを描画できるシンプルなチャートライブラリ「cssCharts.js」 シンプルなグラフ描画とインタラクティブ機能があるのみのグラフライブラリ。多機能すぎるライブラリが苦手な場合はこういうのも便利そうです デザインがフラットな点も特徴。 関連エントリ かなり豊富な種類のグラフを描画できる「ECharts」 Analytics風のモダンでインタラクティブなグラフを描画できる「MetricsGraphics.js」 グラフも描けるスプレッドシート作成jQueryプラグイン「jQuery.sheet」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」
スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」:phpspot開発日誌
Box Loader スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」 最近流行りのスクロール時のアニメーション効果を簡単実装できて便利そうです 関連エントリ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 固定要素をスクロール位置によって切り替えられる「Midnight.js」 ブロック要素の下部をスクロールに応じ曲げてカッコよくするサンプル「Curved Cut」
画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「toCanvas」:phpspot開発日誌
jQuery toCanvas Plugin 画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「toCanvas」 グレー、セピア、ノイズ、ぼかしといった豊富なフィルタを画像・動画にかけられるプラグインです。 オーサリングツールでもなく、サーバサイドでもなく、ブラウザ上で動く、というのはやっぱり便利そうです。 関連エントリ トランポリン風に画像を切り替えるエフェクト実装デモ 画像に雨の日のエフェクトをつけられる「rainyday.js」 JavaScriptで画像に多数のエフェクトをかけられるライブラリ「glfx.js」 液体っぽいクリエイティなエフェクトでUIを楽しくするサンプル集 画像ホバー時のクールなエフェクト実装チュートリアル
ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
オシャレなフルスクリーンスライダーが作れるjQueryプラグイン「Nex」:phpspot開発日誌
Nex - Api Documentation オシャレなフルスクリーンスライダーが作れるjQueryプラグイン「Nex」 フルスクリーンにすることで大きく迫力があるスライダーが作れます。画像切り替え用のアニメーションも複数ある模様。 デモページ 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ハッシュフラグメントでブックマークに対応できるスライダー「Hashslider v2」
１つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」:phpspot開発日誌
μllinx - Multi Directional Links jQuery plugin １つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」 通常ハイパーリンクは１テキストをクリックで単一URLに移動しますが、こちらを利用すればポップアップでリンクの選択肢が選べるようになる、というものです。 マークアップ的には以下のようにシンプル。 シンプルですが、ありそうであまりなかったかもしれないプラグインですね 関連エントリ タイル上にエレメントを並べられるjQueryプラグイン「jMosaic」 高解像度のディスプレイ用に2-4倍迄の画像に置き換えられる「jQuery.imgx」 リアルなページめくり効果をもったギャラリーが作れるjQueryプラグイン「Onebook3d」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 selectの複
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
文字がパラパラめくれるヒンジパネル風のテキストエフェクト実装「FLAPPER」:phpspot開発日誌
指定したCSSセレクタ位置にスムーススクロールするJS「Jump.js」:phpspot開発日誌
固定フッターをスクロール位置に応じて制御できる「stickyhooters」:phpspot開発日誌
読み込みオーバーレイ効果を作れるjQueryプラグイン「LoadingOverlay」:phpspot開発日誌
指定ブロック内に雪を降らせられるjQueryプラグイン「WebSnowjq.js」:phpspot開発日誌
コンテンツをレンガ状にどんどんスタックして配置していける「stackgrid.adem.js」:phpspot開発日誌
フラットデザインがいい感じの円形ローダー実装jQueryプラグイン「CircularLoader.js」:phpspot開発日誌
スライドショーにSVGでモーションブラーをかけてかっこ良くするデモ:phpspot開発日誌