最近のWebサイトでよく見かける表現を実装できるJSライブラリ・チュートリアルまとめ

WebGLを使ってサイト上に陽炎を表現するチュートリアル

ユニークなタイムピッカーや画面遷移アニメーション、WebGLを使った陽炎エフェクトからプッシュ通知の実装まで、最近のWebサイトでよく見かける表現を実装できる注目のJavaScriptライブラリ、チュートリアルを紹介します。

紹介するJSライブラリ、チュートリアル一覧

  1. ユニークで楽しい時間指定JSライブラリ
  2. CSSアニメーションを使った画面遷移を実装できるjQueryプラグイン
  3. WebGLを使ってサイト上に陽炎を表現するチュートリアル
  4. Webサイトからプッシュ通知を送ろう! JavaScriptでのプッシュ通知の実装方法
  5. グリッドレイアウトのシンプルなJSライブラリ
  6. ブロックレイアウトを実装できるJSライブラリ
  7. ツリー構造を実装できるJSプラグイン
  8. もうjQueryは必要ない
  9. Visual Studio Codeを使いこなせ! Chromeと接続してJSをデバッグする方法
  10. スムーズなページ遷移を実装するjQueryプラグイン
  11. アクセサビリティにも対応したモーダルのjQueryプラグイン
  12. アラートメッセージの表示に最適なJSモーダル
  13. マウスに合わせて画像を回転するjQueryプラグイン
  14. テキストに長い影をつけるjQueryプラグイン
  15. ブラウザの戻るを検出してアクションを起こせるjQueryライブラリ

Web制作ナビで紹介したJavaScriptの人気記事

スタイリッシュで高機能、しかもシンプルで使いやすいHTML5メディアプレイヤー「Plyr.js」
スタイリッシュで高機能、しかもシンプルで使いやすいHTML5メディアプレイヤー「Plyr.js」
SVGフィルターを使ってボタンにオリジナリティのある動きを実装するチュートリアル
SVGフィルターを使ってボタンにオリジナリティのある動きを実装するチュートリアル
jQueryプラグイン「editableTableWidget」を使って、Table内のテキストのリアルタイム編集を可能にする方法
jQueryプラグイン「editableTableWidget」を使って、Table内のテキストのリアルタイム編集を可能にする方法
美しく機能的な日付入力、時刻入力を実装できるJSライブラリまとめ
美しく機能的な日付入力、時刻入力を実装できるJSライブラリまとめ
レスポンシブ対応のグリッドレイアウトを簡単に実装できるテンプレート Gridfolio
レスポンシブ対応のグリッドレイアウトを簡単に実装できるテンプレート Gridfolio
スポンサーリンク

1. ユニークで楽しい時間指定JSライブラリ

ユニークで楽しい時間指定JSライブラリ

ユニークで楽しい時間指定UIを実装することができます。

Timedropper

2. CSSアニメーションを使った画面遷移を実装できるjQueryプラグイン

CSSアニメーションを使った画面遷移を実装できるjQueryプラグイン

CSSアニメーションを使って、11種類のオリジナリティある画面遷移を実装することができます。

Animated Transition Effects | デモ

3. WebGLを使ってサイト上に陽炎を表現するチュートリアル

WebGLを使ってサイト上に陽炎を表現するチュートリアル

ブラウザ上で2Dや3Dのグラフィカルなアニメーションを表現できるHTML5のWebGL技術を使って、サイト上に陽炎を表現する方法が紹介されています。

Animated Heat Distortion Effects with WebGL | デモ 

4. Webサイトからプッシュ通知を送ろう! JavaScriptでのプッシュ通知の実装方法

Webサイトからプッシュ通知を送ろう! JavaScriptでのプッシュ通知の実装方法

アプリでよく見かけるプッシュ通知ですが、Webサイトからも送信することができます。

Webサイトからプッシュ通知を送ろう! JavaScriptでのプッシュ通知の実装方法

5. グリッドレイアウトのシンプルなJSライブラリ

gridfolio

ポートフォリオサイトなどで使えるグリッドレイアウトを簡単に実装することができるJSライブラリです。

gridfolio | デモ

6. ブロックレイアウトを実装できるJSライブラリ

bricklayer

簡単にブロックを並べたレイアウトを実装できるJSライブラリです。

bricklayer.js | デモ

7. ツリー構造を実装できるJSプラグイン

treedata

データをツリー構造で表現することができるJSライブラリです。サイトマップや家系図を表現する際に活用できます。

treeData

8. もうjQueryは必要ない

もうjQueryは必要ない

ブラウザの進化によりフロントエンドの開発環境は様変わりしました。jQueryはDOM要素の操作が簡単などの理由で最もよく利用されていましたが、これからはもうjQueryは必要ないかもしれません。jQueryに代わる、ネイティブな書き方が紹介されています。

jQueryは必要ない(You Don’t Need jQuery)

9. Visual Studio Codeを使いこなせ! Chromeと接続してJSをデバッグする方法

Visual Studio Codeを使いこなせ! Chromeと接続してJSをデバッグする方法

Visual Studio CodeがChromeのデバッカープロトコルに対応し、Visual Studio Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行うことができるようになりました。

Visual Studio Codeを使いこなせ! Chromeと接続してJSをデバッグする方法

10. スムーズなページ遷移を実装するjQueryプラグイン

スムーズなページ遷移を実装するJSライブラリ

アプリのような、スムーズなページ遷移を実装できます。

smoothState.js

11. アクセサビリティにも対応したモーダルのjQueryプラグイン

アクセサビリティにも対応したモーダルJSライブラリ

アクセサビリティにも対応しており、写真、動画、確認画面など多様な目的に使用できるモーダルのjQueryプラグインです。

Modaal

12. アラートメッセージの表示に最適なJSモーダル

アラートメッセージの表示に最適なモーダル

アラートメッセージの表示に適しているモーダルです。

SweetAlert2

13. マウスに合わせて画像を回転するjQueryプラグイン

マウス合わせて画像を回転するjQueryプラグイン

マウスの動きに合わせて画像を回転表示することができるjQueryプラグインです。角度を変えた画像を複数枚用意しておきます。

Turntable.js

14. テキストに長い影をつけるjQueryプラグイン

テキストに長い影をつけるjQueryプラグイン

テキストに長い影をつけることができるjQueryプラグインです。CSSを記述する必要がなく、設定が楽です。

Long Shadow jQuery Plugin

15. ブラウザの戻るを検出してアクションを起こせるjQueryライブラリ

ブラウザの戻るを検出してアクションを起こせるjQueryライブラリ

ブラウザの戻るの動作を検出して、アラートを表示するなどのアクションを実行できます。

jQuery-backDetect

スポンサーリンク

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.05.27
  • Views 3,022