ちょちょいと簡単実装で凄い効果!おすすめの jQuery プラグイン 9選

ちょちょいと簡単実装で凄い効果!おすすめの jQuery プラグイン 9選

  • このエントリーをはてなブックマークに追加

また会いましたな!
鳥さんのおしりとコアラのマーチをこよなく愛するまりぞーです(°ω°)ノ

今回は、こりゃ便利!なjQueryプラグインを紹介していきます。
一応ライセンスも併記してます。

だいたいこんな感じに動くよ!みたいな簡単なデモを用意してたりしてなかったりしますので、よろしければそちらもご確認ください。
よろしくお願いしやす。

SVGでアニメーションできるDrawSVG

SVGでアニメーションするjQuery DrawSVG

jQuery DrawSVGは、SVGで描かれたパスにアニメーションを付与できるプラグインです。
簡単にちょちょいと実装できます。

SVGうんぬんに関しては、こちらの記事が参考になります。

DEMO 01 : jQuery DrawSVG

続きを読む

画像の色を抽出してくれるADAPTIVE BACKGROUNDS

画像の色を抽出してくれるADAPTIVE BACKGROUNDS

jquery.adaptive-backgrounds.jsは、画像からドミナントカラー(その画像のメインとなる色)を抽出してくれるプラグインです。

他にも使い方次第でアダプティブな配色にできるようです。こちらの記事が参考になります。

画像の色から背景色を決定!jquery.adaptive-backgrounds.js


DEMO 02 : jquery.adaptive-backgrounds.js

要素をタイル状に配置してくれるMasonry

要素をタイル状に配置してくれるjQueryプラグインMasonry

Masonryは、要素をタイル状に配置してくれるプラグインです。
グリッドグリッドしているレイアウトにしたいときなどに利用できます。


DEMO 03 : Masonry

カルーセルを実装できるslick

カルーセルを実装できるプラグインslick

slickは、お手軽にカルーセルを実装できるプラグインです。
レスポンシブやモバイル端末のスワイプ、タッチに対応できたり、再生スピードやアニメーション、レイアウトなどの細かい設定もできます。

DEMO 04 : slick

ウィンドウ全体にモーダルウィンドウを表示するanimatedModal.js

ウィンドウ全体にモーダルウィンドウを表示するanimatedModal.js

animatedModal.jsは、ウィンドウ全体にモーダルウィンドウを表示するプラグインです。
とってもきれいなのですが、対応しているIEは10+なので、出番は少なめかもしれません…_(:3」∠)_


DEMO 05 : animatedModal.js

画像を読み込んでから実行できるimagesLoaded

画像を読み込んでから実行できるimagesLoaded

imagesLoadedは、画像を読み込んでから実行、を実現してくれるプラグインです。
さきほどのMasonryなど、画像を多く使用している場合はお世話になるかと思います。

入力フォームのバリデーション機能を簡単に実装できるjQuery Validation Plugin

入力フォームのバリデーション機能を簡単に実装できるjQuery Validation Plugin

jQuery Validation Pluginは、入力フォームのバリデーション機能を簡単に実装できるプラグインです。
細かいところまで設定できます。

廃止されたAPI使用時に警告文を表示するjquery-migrate

jquery-migrateは、jQueryの後方互換や、廃止されたAPIを使用しているとき警告文を表示してくれたりするプラグインです。
使い方などはこちらが参考になると思います。

jQuery Migrate pluginを使ってみる。 | バシャログ。

jQueryにおけるアニメーションの種類を拡張するjQuery Easing Plugin

jQuery Easing Pluginは、jQueryにおけるアニメーションの種類を拡張できます。

Donate

If you use this in a commercial project, you might consider a buying me a beer by way of thanks. Use the button below to donate to the beer fund via paypal.

作者さんはビールをおごってほしいそうです。

たくさんあるアニメーションの早見表はこちら

Easing Function 早見表

まとめ

いかがでしょうか!(°ω°)
おすすめするからには、割りと使ってみてからでないと…と熱心にデモも用意してみました。

デモを用意しながら感じたことがひとつあります。
「ぬ」という文字の汎用性、語感の良さが大好きです。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

まりぞー(マークアップエンジニア)

ゆるキャラとFPSゲームとおいしい食べものが好きですヽ(゜ω゜)ノ

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation