入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation... 次の記事 ≫：ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示...
ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」:phpspot開発日誌
入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation... 次の記事 ≫：ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示...
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
フラットでカッコいいselectボックスを作成できるjQueryプラグイン「EasyDropDown」:phpspot開発日誌
EasyDropDown - A Drop-down Builder for Styleable Inputs and Menus フラットでカッコいいselectボックスを作成できるjQueryプラグイン「EasyDropDown」 次のようなフラットなselectボックスが実装できます。スタイルが色々選べるようです 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」 BootstrapのselectボックスをよりリッチにするjQueryプラグイン「bselect」 オシャレなSelectボックスが実装できる「FancySelect」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 selec
文中の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
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」:phpspot開発日誌
stickUp - a free jQuery Plugin スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 最初からposition:fixedではなく、一定以上スクロールした段階でfixedにしてくれるプラグインです。 シームレスにナビが固定されるあたりがクールだったりしますが、これを簡単に実装できます。 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 クールな円形ナビゲーションを作るチュートリアル
要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌
Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou
selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」:phpspot開発日誌
jQuery Selectric selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」 通常のselectをBootstrap2風やフラットな形にスタイリングすることが出来るプラグインです。 リストの中身も綺麗にスタイリングされています。 テーマも複数から選んでダウンロードが可能 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 オシャレなSelectボックスが実装できる「FancySelect」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 selectをカッコよくしてくれるjQueryプラグイン「Minimalect」 selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」
画像にビフォーアフターを実装できるjQueryプラグイン - NxWorld
使う機会がありそうなので調べたら、いくつか良さそうなものがあったので備忘録兼ねて紹介します。 商品の使用前後・家などのリフォーム前後・美容室のカット前後といったように、ビフォーアフターを見せたいときに便利なjQueryプラグインです。 全部で3つのプラグインを紹介していますが、どのプラグインも簡単に設置できてほとんどのブラウザで問題なく動作する感じです。 TwentyTwenty 使用方法 「TwentyTwenty」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。 パスなどは自身の環境に合わせて変更してください。 <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js
[JS]画像を使わずに、テキストをかわいくサークル状に配置するスクリプト -CircleType
幅780pxで表示 CircleTypeの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、Lettering.jsを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/lettering.js"></script> <script type="text/javascript" src="js/circletype.min.js"></script> FitText.jsを併用すると、表示サイズに合わせてテキストのサイズを変更することもできます。 Step 2: HTML HTMLはシンプル
[JS]斜めのグリッドを使った美しいレイアウトを簡単に実装できるスクリプト -diamond.js
オプションを変更したキャプチャ diamonds.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="diamonds.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.diamonds.js"></script> Step 2: HTML ダイアモンド状に配置する各アイテムのclassに「.item」を添え、ラッパーで包みます。 <div class="d
スロットっぽく文字をアニメーションさせられる「Odometer」:phpspot開発日誌
Odometer ? Transition numbers with ease スロットっぽく文字をアニメーションさせられる「Odometer」 数字や文字をスロットマシーンのようにアニメーションさせることが出来ます エフェクトとして色々と使えそうです。 関連エントリ CSSアニメーションでページを紙芝居の様に切り替えるデモ 高速なCSSアニメーションをJSで制御できる「animo.js」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 ハードウェアアクセラレーションで高速なCSS3アニメーションを実現できるjQueryプラグイン「Minimit anima」 CSS3を使った多彩なアニメーション用ライブラリ「magic」
CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」:phpspot開発日誌
jQuery Custombox :: dixso.net CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 モーダルダイアログ自体のデザインは至って普通なんですが、出てくる際のエフェクトが豊富で一見の価値ありです エフェクト以外にも、イベントハンドラの設定やカスタマイズ項目が豊富で使いやすそうです 関連エントリ シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ 何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」 フラットでカッコいいモーダルダイアログ実装デモ
バッテリーが必要な場合やネット接続がない場合に警告を表示できるjQueryプラグイン「FailSafe」:phpspot開発日誌
FailSafe - A jQuery Plugin to make your App Robust バッテリーが必要な場合やネット接続がない場合に警告を表示できるjQueryプラグイン「FailSafe」 次のように、バッテリーがなかったり、接続状態が悪い場合に警告を出してくれます。 操作時にバッテリーやインターネット接続が必須なサービスの場合は使うと便利そう。 尚、バッテリー残量を取得する場合はFirefox等の対応ブラウザのみとなります。 関連エントリ ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 タッチができてレスポンシブなカルーセル実装jQuery
簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手本にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単＆シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる本家サイトのほかに、日本語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単！弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード：bxslider様
ユーザーフレンドリーにするための40の新しいjQueryプラグイン「40 Fresh jQuery Plugins To Make Your Website User Friendly」
ユーザーフレンドリーにするための40の新しいjQueryプラグイン「40 Fresh jQuery Plugins To Make Your Website User Friendly」 Webデザインやコーディングの経験を積んでくると、「ユーザーにやさしいWebサイト」といったことを意識するようになると思いますが、今回はそんなユーザーフレンドリーなサイトにするためのjQueryプラグインをまとめた「40 Fresh jQuery Plugins To Make Your Website User Friendly」を紹介したいと思います。 Jquery Alpha Image by Ilker Guller 基本的な機能からフレキシブルデザインに対応したもの、検索候補を出すプラグインなど、かゆい所に手の届くプラグインが揃っています。中でも気になったものをピックアップしたので下記よりご覧く
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」:phpspot開発日誌
もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」 2013年07月22日- Readmore.js: jQuery plugin for long blocks of text もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」。 ブログ等でよくある、「ReadMore」。クリックすることで全文が見れるような物ですが、サーバサイドでやるとリロードが必要。 jQueryで$(element).readmore() ってやればすぐにテキストを短くしてくれるところが便利そうです。 クリック時のアニメーションなんかもできます。地味だけど便利ですね 関連エントリ selectをカッコよくしてくれるjQueryプラグイン「Minimalect」 タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」 サ
サイトの使い方をその場で表示できるjQueryプラグイン「TourBus」:phpspot開発日誌
jQuery TourBus サイトの使い方をその場で表示できるjQueryプラグイン「TourBus」 便利さ故にこの手のプラグインは増えて来ましたが、実装のしやすさなど個別に差異があると思うので選択肢の１つとして検証してみるのもよいかも 便利なライブラリが開発され、改善された派生ライブラリなどがこうして出てきて、定番が決まって、どんどんWEBは進化していくんですね 関連エントリ サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
