Jqのプラグインをまとめて整理する作業の後、個人的にはかなりいい感じ
jQuery関連プラグインを中心に、Bootstrap支援プラグインや非jQueryプラグインなど、よく使われるJSライブラリを整理しました。その機能は、ページレイアウト、画像スライドショー、画像アルバム表示、機能補助などに関するものです。この記事では、プラグインの機能を簡単に紹介するだけで、今後、プラグインを使用する際には、使い方の記事を補足する予定です。
jQuery Easing: jQueryアニメーションエフェクトエクステンション
jQuery Migrate: jQueryアプリケーション移行ヘルパープラグイン
Modernizr: HTML5とCSS3のための機能検出ライブラリ
jQuery Flexslider: レスポンシブなjQueryコンテンツスクロールプラグイン
WOW:ページのスクロールに合わせて、動的な要素のアニメーション効果を表示する
Sticky: ページ上の特定の位置に要素を浮かせたままにする。
Bootstrap Hover Dropdown。Bootstrapのマウスホバードロップダウン
jQuery Stellar: jQueryベースのパララックススクロールプラグイン
Owl Carousel: パワフルで便利なjQueryスライドショープラグイン
YTPlayer: jQueryベースのYouTube動画再生プラグイン
jQuery Waypoints: jQueryスクロールリスナープラグイン
easyPieChart: 軽量なチャート作成プラグイン
Isotope: jQuery スマートレイアウトプラグイン
jQuery imagesLoaded: jQuery画像読み込みプラグイン
jQuery Countdown:ミリ秒精度のjqueryカウントダウンプラグイン
jQuery Counterup: jQuery数値動的累積 jQuery
jqBootstrapValidation: BootstrapフォームのためのJQueryバリデーションフレームワーク
jQuery Revolution Slider: 強力なパララックス応答性スライドプラグイン
1. jQuery Easing: jQueryアニメーションエフェクトエクステンション
jQuery APIは、フェードインやフェードアウトなどのシンプルなアニメーション効果と、カスタムアニメーションエフェクトを提供します。jQuery Easing(jquery.easing.js)は、jQueryアニメーション効果拡張プラグインで、直線均一運動、可変加速度運動、バッファリングなど、豊富なアニメーション効果の実装に使用することが可能です。
jQuery Easingは比較的古いjQueryプラグインで、特にページスクロールやスライドショーの切り替えなど、一部のシーンで多くのWebサイトで使用されています。非常に小さく、様々なアニメーションオプションがあり、使いやすく、無料です。
2. jQuery Migrate: jQueryアプリケーション移行ヘルパー・プラグイン
jQueryのバージョンによって違いがあります。例えば、live(), die(), toggle(), sub(), $.browser などは、1.9でサポートが終了しています。 サイトのコードを変更せずに1.9以降のバージョンを使用するには、jQuery migrate(jquery-migrate)を使用してマイグレーションとオーバーライドを行う必要があります。
3. Modernizr:HTML5とCSS3用に開発された機能検出ライブラリ
Modernizr(moderniz.js)は、訪問者のブラウザの違い(新しい規格への対応の違いを意味します)に基づいて異なるレベルの体験を開発するデザイナーの仕事を、より簡単にするオープンソースのJSライブラリです。デザイナーは、これらの新しい技術をサポートしていない他のブラウザでの制御を犠牲にすることなく、それらをサポートしているブラウザでHTML5とCSS3の機能をフルに活用することができます。
Modernizr のスクリプトをウェブページに埋め込むと、現在のブラウザが @font-face, border-radius, border-image, box-shadow, rgba() などの CSS3 機能をサポートしているかどうか、またオーディオ、ビデオ、ローカルストレージ、新しいタグタイプや属性などの HTML5 機能をサポートしているかどうかが検出されます。これらの情報を手に入れれば、それらをサポートしているブラウザで、JSベースのフォールバックを作成するか、そうでないブラウザのために単純なグレースフルダウングレードをするかを決定するために使用することができます。さらに、ModernizrはIEがHTML5要素へのCSSスタイルの適用をサポートするようにし、開発者がこれらのよりセマンティックなタグをすぐに使用できるようにすることができます。
4. jQuery Flexslider: レスポンシブなjQueryコンテンツスクロールプラグイン
Flexslider (jquery.flexslider.js) は、軽量なレスポンシブ jQuery ベースのコンテンツスクロールプラグインです。flexslider を使うと、あなたのプロジェクトで美しいコンテンツスクロール効果を簡単に作成することができます。このプラグインは数年にわたりWDLのBest jQuery Plugin of the Yearに選ばれており、あなたのWeb開発のために試してみる価値があります。非常に高いカスタマイズ性で、コンテンツスクロール効果を簡単に作成することができます。開発者はFlexsliderを使って、様々な画像回転効果、フォーカスマップ効果、テキスト混在のスクロール効果を簡単に作成することができます。
5. WOW:ページのスクロールに合わせて動的な要素のアニメーション効果を表示する
WOW.jsは、このCSSアニメーション効果を実現するためのプラグインです。カスタマイズが簡単で、スタイル、遅延、長さ、オフセット、反復などのアニメーション設定を変更することが可能です。
Wow.jsは、ユーザーがページをスクロールする際に、CSSアニメーションを表示させることができます。デフォルトでは、ユーザーはこれを使用して animate.css アニメーションを開始することができます。wow.js は他の JavaScript パララックスプラグインよりも小さく、Scrollorama(非常に派手ですが、より面倒でもあります)に似ています。wow.js はインストールと使用が非常に簡単です。wow.jsを使用すれば、非常に素早く起動し、コードを実行することができます。
6. スティッキー:ページ上の特定の位置に要素を浮かせておくこと
Sticky (sticky.js) は、Webページ上で任意の要素を常に見えるようにすることができるjQueryプラグインです。jQuery Stickyを使うと、任意の要素をページ上のどこかに固定し、常に見えるようにすることができます。ページをスクロールする際の上部固定ナビゲーション表示プラグインとして使用することで、ハンドリングスクロールする要素を表示したまま、ページがスクロールしても消えたり、他の要素に上書きされたりすることがありません。
7. Bootstrapホバードロップダウン。ブートストラップ・マウスホバーオートドロップダウン
マウスホバーでドロップダウンさせるプラグイン Bootstrap Hover Dropdown (bootstrap-hover-dropdown.js)
8. jQuery Stellar: jQueryベースのパララックススクロールプラグイン
jQuery Stellar (Stellar.js) は、ウェブページに簡単にパララックススクロール効果を実装するのに役立ち、任意のスクロール要素にパララックススクロール効果を提供します。タグにdata属性を追加し、$.stellar()を実行するだけで、クールな視差スクロールを実現できます。
9. フクロウのカルーセル パワフルで便利なjQueryスライドショープラグイン
Owl Carousel (owl.carousel.js) は、パワフルで便利、かつ小さな jQuery スライドショー プラグインです。その特徴は、すべてのブラウザとの互換性、レスポンシブ対応、CSS3 オーバーロード対応、タッチイベント対応、JSON およびカスタム JSON 形式、進捗バー対応、カスタムイベント対応、遅延読み込み対応、適応的高さのサポート、などです。
10. YTPlayer: jQueryベースのYouTube動画再生用プラグイン
YTPlayer (jquery.mb.YTPlayer.js) は、jQuery ベースの YouTube 動画再生プラグインです このプラグインは、あなたのウェブサイト上でお気に入りの YouTube 動画を再生したり、YouTube 動画をウェブサイトの HTML 背景にすることを可能にします。このプラグインは中国ではあまり意味がないようですが。
11. jQuery Waypoints: jQueryスクロールリスナープラグイン
jQuery Waypoints (Waypoints.js) は、様々なスクロールイベントを捕捉するためのプラグインです。 Waypoints.jsを使用すると、ユーザーがスライダーをスクロールしたときに、さまざまな動的効果をトリガーすることができます。例えば、画像が表示されたり、テキストが流れたり、その他様々なアニメーションを行うことができます。また、Waypointsは固定要素や無限スクロールもサポートしており、非常に強力な機能です。
プラグインの説明 要素スクロールのリスナープラグイン Waypoints
12. easyPieChart: 軽量なチャート作成プラグイン
jQuery East Pie Chart (easypiechart.js)は、主にHTML5でcanvas要素に基づいた美しい円グラフやアニメーション効果をレンダリングして作成するために使用される軽量なjQueryプラグインです。これらのオプションのための初期化関数のセットでカスタム動作を設定することができます。このプラグインは、すべての主要なブラウザの canvas 要素のサポートをサポートしています。 excanvas を使えば、IE 7+8 でもグラフを描画できます。
13. Isotope: jQuery Smart Layout プラグイン
Isotope (jquery.isotope.js) は、ほとんどのブラウザをサポートし、jquery 1.4.3 以上を必要とする優れた jquery アダプティブ プラグインです。動的でスマートなレイアウトを作成するために使用することができます。あなたは、フィルタリングされた項目で非表示と表示、並べ替え、さらに整理することができます。また、Isotopeには多くのクールなアニメーションがあります。
14. jQuery imagesLoaded: jQuery画像読み込みプラグイン
imagesLoaded (jquery.imagesloaded.js) プラグインは、画像の読み込みに成功するまで、画像が読み込まれたかどうかを検出する一連の動作です。
プラグイン説明:imagesLoaded
15. jQuery Countdown: ミリ秒精度のjQueryカウントダウンプラグイン
jQuery Countdown (jquery.countdown) は、とても簡単に使える無料のjQueryカウントダウンプラグインです。ソースファイルをダウンロードし、コードを必要なページにコピーするだけで、カウントダウンの開始時間をカスタマイズすることができます。
プラグインの説明:jQueryカウントダウンプラグインjQuery.countdown
16. jQuery Counterup: jQuery数値動的累積 jQuery
jQuery Counterup (jquery.counterup.js) 低い数値から高い数値まで動的に蓄積するjQuery数値表示プラグインで、0から指定した値までの数値を一定期間動的に表示することができます。
プラグインの説明 番号の蓄積プラグインCounterUp
17. jqBootstrapValidation : BootstrapフォームのためのjQueryバリデーションフレームワーク
jqBootstrapValidation (jqBootstrapValidation.js) は、BootstrapフォームのためのJQueryバリデーションフレームワークです。バリデーションはJSフォーマットを書かずにデータウェイで直接コーディングされ、メールバリデーション、数値最大最小バリデーション、長さバリデーション、正規表現バリデーション、非同期バリデーション、組み合わせバリデーションをサポートし、エラー送信成功時にコールバック表示されます。
18. jQuery Revolution Slider:強力なパララックス・レスポンシブ・スライドショー プラグイン
jQueryレボリューションスライダー(jquery.themepunch.revolution.js)は、パララックス機能を備えたスライドショーのプラグインであり、このプラグインは、適応機能を備えた最も強力なスライドショープラグインのためにワードプレスに現在ある、パララックス効果で、フル幅のスライドを作成できますすべてのスライドは、彼がスライドショーのすべての機能を備えている。
Slider Revolutionはcodecanyonで最も売れているワードプレススライドショープラグインで、themeforestで最も使われているワードプレステーマ用のスライドショープラグインです。記事のサムネイル、画像の切り替え、アニメーション効果、3D効果...あなただけが思いつかない、できないことはない、Slider Revolution スライドショープラグインは、あなたがそれを使用した後にのみ知ることができる強力なものです。これはまた、テーマフォレストの多くのテーマ作者は、組み込みテーマのプラグインとしてそれを使用している理由です。
関連
-
[解決済み】"Unexpected token ILLEGAL "の原因が見えない
-
[解決済み】JQuery $("#content").append が動作しない。
-
[解決済み] キャンバスを使用して、null のプロパティ 'getContext' を読み取ることができません。
-
[解決済み] PhoneGap / Cordovaで画像ファイルをローカルにキャッシュするにはどうすればよいですか?
-
[解決済み] 未定義のプロパティ 'replace' が読み込めない - JS で生成された HTML のテキストを置換する。
-
[解決済み] Yarnでパッケージをインストールする際、「incorrect peer dependency」とはどういう意味ですか?
-
[解決済み] jQuery iframe load()イベント?
-
[解決済み] Google MapsのAPIを使用して地図を作成する際の問題点
-
[解決済み] ギャツビーでFont Awesomeのようなアイコンを使用する方法
-
[解決済み] 新しいコンポーネントがAngularをレンダリングしない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】React-Router 外部リンク
-
[解決済み】document.getElementbyId()がnullを返す件【重複あり
-
[解決済み] DOMWindow' で 'postMessage' の実行に失敗しました: https://www.youtube.com !== http://localhost:9000
-
[解決済み] 純粋なjavascriptで単語が等値線であるかどうかをチェックします。
-
[解決済み] RegexとISO8601形式のDateTime [重複]。
-
[解決済み] JSONオブジェクトのサイズを取得する
-
[解決済み] contenteditableを使用したonChangeイベント [重複]。
-
[解決済み] Jqueryボタンのclick()関数が動作しない【重複】について