トップ50の無料JavaScriptプラグインとライブラリ

公開: 2021-07-13

このページの無料のJavaScriptプラグインとライブラリはすべて、簡単で特定の機能を提供します。 肥大化したオールインワンフレームワークはありません。 Webデザインと開発プロセスをはるかに簡単かつ迅速にするのに役立つ、便利で軽量な問題解決ソリューション。

ご想像のとおり、スライダー、画像ギャラリー、レスポンシブメニュー、モーダルウィンドウ、およびその他の多くの一般的なコンポーネントを作成するためのプラグインが以下にあります。 ただし、サイドバーの余白のメモ、GIFプレビュー、アニメーション化されたファビコンなど、真にユニークな機能を提供するプラグインもあります。

また、無料のjQueryプラグインのコレクション、またはJavaScriptチートシートのコレクションもご覧ください。

テキストブロック

Textblock –継続的にレスポンシブなタイポグラフィを表示するためのJavaScriptツール。

テキストブロック

Uppy

Uppy –あらゆるウェブサイトやアプリと統合できる洗練されたモジュラーファイルアップローダー。

Uppy

Tone.js

Tone.js –ブラウザでインタラクティブな音楽を作成するためのフレームワーク。

Tone.js

Editor.js

Editor.js –無料の次世代ブロックエディターアプリ。

Editor.js

lax.js

lax.js –スムーズなスクロールアニメーションを作成するための小さなバニラJavaScriptプラグイン。

lax.js

それを入力する

TypeIt –「世界で最も用途の広い」と言われているJavaScriptタイピングライブラリ。

それを入力する

iro.js

iro.js –SVGを使用するJavaScript用の最新のHSVカラーピッカーウィジェット。

iro.js

Cleave.js

Cleave.js –フォーム入力にリアルタイムフォーマットを追加するためのライブラリ。

Cleave.js

Freezeframe.js

Freezeframe.js –アニメーション化された.gifを一時停止し、ホバー、クリック、またはタッチでそれらを有効にするライブラリ。

Freezeframe.js

darkmode.js

darkmode.js –最小限の労力でWebサイトにダークモードを追加します。

darkmode.js

Scene.js

Scene.js –CSSおよびJavaScriptのタイムラインベースのアニメーションライブラリ。

Scene.js

Bun.js

Bun.js –CSSを使用してカスタムチェックボックスとラジオボタンを生成します。

お団子

オーバーレイスクロールバー

オーバーレイスクロールバー–ネイティブスクロールバーを非表示にし、カスタムスタイルのバージョンに置き換えるJavaScriptプラグイン。

オーバーレイスクロールバー

MailtoUI

MailtoUI –便利なUIコンポーネントを標準の電子メールリンクに追加するスクリプト。

MailtoUI

フルスクリーンスライダー

フルスクリーンスライダー–ページセクションを制御し、マウスホイールとタッチイベントによるナビゲーションを有効にします。

フルスクリーンスライダー

ページマップ

ページマップ–ユーザーにナビゲーションコンテキストを提供する小さな「ミニマップ」をWebサイトに追加します。

ページマップ

Chart.xkcd

Chart.xkcd –手描きの外観のチャートを作成するためのライブラリ。

Chart.xkcd

GPickr

GPickr –美しいグラデーションを生成するPickrカラーピッカーライブラリの実装。

GPickr

可動

移動可能–移動、サイズ変更、ドラッグ、回転などを可能にするJavaScriptライブラリ。

可動

Cube.js

Cube.js –完全なオープンソース分析ソリューション:分析サーバーインフラストラクチャに裏打ちされた視覚化にとらわれないフロントエンドSDKとAPI。

simpleParallax

simpleParallax –任意の画像に視差アニメーションを追加する小さなJavaScriptライブラリ。

simpleParallax

Bounds.js

Bounds.js –遅延読み込みなどの効果に使用できる非同期境界検出用のスクリプト。

Bounds.js

不気味な顔

Creepyface –位置に基づいて顔をカーソルで「見る」ようにするJavaScriptライブラリ。

Creepyfaceの例

LegraJS

LegraJS –レゴのようなレンガで描くことを可能にするライブラリ。 何を作りますか?

LegraJSの例

Paged.js

Paged.js –ブラウザでコンテンツをページングするためのオープンソースライブラリです。 W3C仕様に基づくと、これはページドメディアの一種のポリフィルであり、ページドメディアCSSモジュールの生成コンテンツです。

Paged.js

フォーカスオーバーレイ

フォーカスオーバーレイ–フォーカスされた要素にオーバーレイを作成するためのライブラリ。 美しいデザインとより良いアクセシビリティ。

フォーカスオーバーレイ

流れるような

Flowy –フローチャートの作成に使用できる最小限のJavaScriptライブラリ。

Flowyの例

振付師-js

Choreographer-jsは、複雑なアニメーションを処理するためのシンプルなライブラリです。
振付師-js無料のJavaScript

Leaflet.js

Leaflet.jsは、インタラクティブマップ用のJavaScriptライブラリです。
Leaflet.js無料のJavaScript

ロリー

Loryは、バニラJavaScriptで記述されたタッチ対応のミニマルなスライダーです。
Lory無料のJavaScript

CurrencyFormatter.js

CurrencyFormatter.jsは、非常にシンプルな通貨フォーマットライブラリ(155通貨と7KB gzip圧縮)です。
CurrencyFormatter.js無料のJavaScript

アーク

ARc(Atomic React)は、AtomicDesignアプローチを採用したReactアプリの定型文です。
ARc無料のJavaScript

Shave.js

Shave.jsは、html要素内のテキストを切り捨てるための最新のJavaScriptプラグインです。
無料のJavaScript

Next.js

Next.jsは、サーバーでレンダリングされたReactアプリケーション用の最小限のフレームワークです。
無料のJavaScript

設計図

ブループリントはReactUIコンポーネントのコレクションであり、Web上の一般的なインターフェイス要素、パターン、および相互作用をカバーしています。
ブループリント無料のJavaScript

baguetteBox.js

baguetteBox.jsは、モバイルデバイスでスワイプジェスチャをサポートするシンプルで使いやすいレスポンシブ画像ライトボックススクリプトです。 純粋なJavaScriptで書かれています。

baguetteBoxjsシンプルで簡単なライトボックススクリプト複数のギャラリースワイプジェスチャーサポートモバイルデバイス純粋なJavaScript

ScrollReveal

ScrollRevealプラグインを使用すると、デスクトップブラウザとモバイルブラウザの両方でWebページのスクロールアニメーションを非常に簡単に作成できます。

ScrollRevealスクロールアニメーションを簡単に作成するWebモバイルブラウザ

大音量のリンク

Loud Linksは、Webサイトにインタラクションサウンドを追加するための軽量のJavaScriptライブラリです。 これは、HTML5オーディオ要素を作成し、それを使用してMP3またはOGGオーディオファイルを再生することによって行われます。

LoudLinksの小さなJSライブラリのインタラクションサウンド

Bricks.js

Bricks.jsは、固定幅要素用の「非常に高速な」組積造レイアウトジェネレーターです。

固定幅要素用のBricks.jsの超高速組積造レイアウトジェネレーター

MediumEditor

バニラJavaScriptを使用して記述されたMediumEditorは、軽量(28kb)Medium.comWYSIWYGインラインエディターツールバーのクローンです。 利用可能なMediumditor拡張機能とテーマの選択もあります。

バニラJavaScriptMediumEditor軽量MediumWYSIWYGインラインエディターツールバークローン

物質

Substanceは、Webベースのコンテンツ編集用のJavaScriptライブラリです。 カスタムテキストエディタやWebベースのパブリッシングシステムを作成するために必要なすべてのツールを提供します。

Webベースのコンテンツ編集用のSubstanceJavaScriptライブラリ

List.js

List.jsは、軽量で高速なバニラJavaScriptスクリプトであり、リスト、テーブル、その他のHTMLに検索、並べ替え、フィルター、柔軟性を追加します。

List.js軽量の高速バニラJavaScriptは、HTMLに検索ソートフィルターと柔軟性を追加します

Popper.js

Popper.jsは、ポッパー、ツールチップ、およびポップオーバーを管理するための軽量(4kb最小化)ライブラリです。 1行のコードでツールチップをすばやく簡単に配置できます。

Popper.jsKickassライブラリPoppersのツールチップを管理するPopovers

InlineTweet.js

InlineTweet.jsを使用すると、Webページ上の任意のテキストからツイート可能なリンクを簡単に作成できます。 ツイート可能なテキストをdata-inline-tweetのコンテナにラップするだけです。

SweetAlert2

SweetAlert2は、JavaScriptのポップアップボックスの美しくカスタマイズ可能な代替品です。

SweetAlert2JavaScriptアラートの美しいカスタマイズ可能な置換

Force.js

Force.jsは、HTML要素のアニメーション化とWebページ内の移動を簡単にするJavaScriptライブラリです。

Force.jsの簡単な方法でスクロールしてページをアニメーション化

Push.js

Push.jsは、Javascriptデスクトップ通知を起動して実行するためのクロスブラウザーソリューションです。

Bideo.js

Bideo.jsは、フルスクリーンの背景ビデオをWebページに非常に簡単に追加できるJavaScriptライブラリです。

Bideo.js簡単なフルスクリーンHTML5背景ビデオWeb

Microlight.js

Microlight.jsは、あらゆるプログラミング言語向けの軽量のコード強調表示ライブラリであり、読みやすさを大幅に向上させます。

Microlight.jsコードハイライトライブラリは読みやすさを向上させます

アルゴリアの場所

Algolia Placesは、ウェブサイトで住所検索オートコンプリートJavaScriptライブラリを使用する簡単な方法です。

AlgoliaPlacesの住所検索オートコンプリートJavaScriptライブラリ

flatpickr

バニラJavaScriptで記述されたflatpickrは、軽量のdatetimepickerおよびカレンダーソリューションです。

flatpickr軽量datetimepicker

anime.js

Anime.jsは、柔軟で軽量なJavaScriptアニメーションライブラリです。 CSS、個別変換、SVG、DOM属性、JSオブジェクトで動作します。

anime.js柔軟で軽量なJavaScriptアニメーションライブラリ

Cleave.js

Cleave.jsは、入力中に<input/>コンテンツをフォーマットするプラグインです。

Cleave.js形式の入力

Lightgallery.js

Lightgallery.jsは、依存関係のないフル機能のJavaScriptライトボックスギャラリーです。

Lightgallery.jsJavaScriptライトボックスギャラリー