JavaScript のサンプル
このページは、JavaScript のサンプルをまとめる予定のページです。
目次
注意
- 各サンプルのコードは、ソースを表示して確認してください。コードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) です。
- 動作対象は、IE11、Edge、Firefox、Chrome を想定しています。
一覧
標準JavaScript
※ライブラリを使用しないサンプルです。(細かい仕様が要求される場合などのベースになる実装サンプル)
基本的にはライブラリを使用したほうがよいと思います。
- jQueryを使わないスムーススクロール
- jQueryを使わないツールチップ
- jQueryを使わないページトップに戻る
- スクロールアニメーション
- 上下ホイールスクロールによる横スクロール
- カウントアップ
- ファイルのダウンロード
- background-size: cover の自力実装
<table>
入力部品
<input type="text"><input type="number"><input type="password"><input type="file"><textarea>- Enter キーによる入力項目の移動
- 入力部品と URL パラメータの連携
- シンプルな編集エディタ (contenteditable, execCommand)
- 画像の貼り付け (Data URL)
パーツ
Web API
- Notifications API による通知 ※ IE11 非対応
- Web Share API によるシェア ※ IE11 非対応
- ドラッグで並び替え可能なリスト項目 (Drag And Drop API)
- webkitSpeechRecognition による音声入力 (Web Speech API) ※ Chrome のみ
- 単純な Custom Elements (Web Components) ※ Chrome, Firefox のみ
- 位置情報の取得 (Geolocation API)
Service Worker ※ IE 非対応
- 静的HTMLページのオフライン化 (Service Worker の単純な例)
- 静的HTMLページのオフライン化 (Service Worker の単純な例 2 - オフライン時のみキャッシュを使用)
jQuery
外部ライブラリ (スライダー系)
外部ライブラリ (メディアアート、アニメーション系)
- GSAP のサンプル
- vivus.js
- wow.js
- p5.js
- particles.js (vincentgarreau)
- particles.js (marcbruederlin)
外部ライブラリ (地図系)
外部ライブラリ (グラフ系)
外部ライブラリ (その他)
- Bootstrap 4 のサンプル
- Vue.js のサンプル
- AjaxZip3
- Twemoji
- perfect-scrollbar
- jsQR
- jsQR Demo (外部リンク)
- AOS
- AOS - Animate on scroll library (外部リンク)